Comment faire passer le sélecteur "this" de JQuery en paramètre

Question

Pour une classe, je dois créer une interface glisser-déposer en utilisant uniquement CSS, HTML 4.01 et Javascript avec la librairie JQuery; pas de plugins autorisés. Je figure la meilleure façon de le faire était aler la position CSS de la div que je suis censé faire glisser sur mousedown puis sur mouseup

$(document).ready(function(){ 
    $(".draggable").mousedown(Dragging(this)); 
    function Dragging(draggableObject) 
    { 
     draggableObject.live("mousemove", function(){draggableObject.css(/*alters the position of the div*/)}); 
    }; 
}); 

Mon problème est que draggableObject ne semble pas avoir des propriétés CSS, J'ai essayé d'appeler une alerte avec ses propriétés et apparemment elles sont nulles. Qu'est-ce que je fais de mal en passant l'objet, ou ailleurs?

Answer 1

Pourquoi cela ne fonctionne-t-il pas? - En utilisant Dragging(this), vous appelez la fonction immédiatement, sans l'exécuter lorsqu'elle est liée. Le premier paramètre que la fonction obtient lorsqu'elle est exécutée en tant que gestionnaire d'événements est également le event object.

---

Il devrait ressembler à ceci:

$(document).ready(function(){ 
    $(".draggable").mousedown(Dragging); 
    function Dragging() { 
    $(this).bind("mousemove", function(){ 
     $(this).css(/*alters the position of the div*/) 
    }); 
    } 
}); 

Dans un gestionnaire d'événements thisdéjà fait référence à l'élément, il n'y a pas besoin de passer autour. Vous pouvez également raccourcir comme ceci:

$((function(){ 
    $(".draggable").mousedown(function() { 
    $(this).mousemove(function(){ 
     $(this).css(/*alters the position of the div*/) 
    }); 
    }); 
}); 

Remarque nous n'utilisons .live() ici, ce n'est pas pour ce cas (et ne peut pas être utilisé sans un sélecteur), vous voulez juste .bind() directement (le .mousemove() le raccourci ci-dessus utilise également .bind()).