Impossible d'obtenir l'ID des divs draggable dans jQuery (à l'aide de jQuery UI)

Question

Pour une raison quelconque, le script ci-dessous ne parvient pas à obtenir l'ID des divs draggable en utilisant attr('id'), mais il fonctionne sur les autres éléments statiques de la page. Je suis totalement confus quant à pourquoi cela ne fonctionnera pas et si quelqu'un a une solution pour moi, il me serait très reconnaissant.

$(document).ready(function(){ 
    //$(".draggable").draggable(); 
    $(".draggable").draggable({ containment: '#container', scroll: false }); 
    $(".draggable").draggable({ stack: { group: '#container', min: 1 } }); 


    $("*", document.body).click(function (e) { 
     var offset = $(this).offset();// get the offsets of the selected div 
     e.stopPropagation(); 
     var theId = $(this).attr('id');// get the id of the selceted div 
     $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")"); 
     $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); //post x,y to php (and the id of the elemnt) 
    }); 

    var req = function() { 
     $.ajax({ 
      url: "out.php", 
      cache: false, 
      success: function(html){ 
       $("#stuff").empty().append(html); 
       var css_attr = html.split(","); 
       $('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px'); 
      }, 
      complete: function(){ 
       req(); 
      } 
     }); 
    }; 
    req(); 
}); 

Remarque: Ce script dépend des sources JavaScript suivantes.

• jquery.js
• http://jqueryui.com/latest/ui/ui.core.js
• http://jqueryui.com/latest/ui/ui.draggable.js
• http://jqueryui.com/latest/ui/ui.droppable.js

Answer 1

Votre fonction de clic fonctionne pour moi sur une page de test. Par curiosité, si vous déplacez la ligne 'e.stopPropogation()' au bas de votre fonction de clic, se comporte-t-elle différemment?

Answer 2

Soyez prudent avec *, vous savez, tout signifie tous, si vous avez <div><p><span><a></a></span></p></div> cela signifie que l'action est définie sur chaque élément unique. Je spécifierais des classes ou des étiquettes qui devraient être affectées par votre fonction, pour être toujours sûr que vous obtenez ce que vous voulez être cliqué.

Essayez votre code remplacement * avec l'objet que vous pensez qu'il est ID est pas obtenir, et voir si cela fonctionne ..

Answer 3

Cela peut sembler assez évident, mais êtes-vous sûr que tous les éléments que votre sélection ont fait IDs. Si vous incluez tout (avec le *) alors il est probable que certains éléments n'ont pas d'ID.

Answer 4

Actuellement, vous êtes attacher le gestionnaire de clic pour tous éléments dans les DOM avec * (très très mauvais, ne le faites pas!), y compris les enfants dans ces draggables.

vous arrêter correctement l'événement de bulles à l'aide .stopPropagation(), mais il est probable qu'un enfant d'un .draggableque vous avez cliqué, pas le draggable lui-même. Ce que vous voulez est en fait à l'écoute sur eux-mêmes élément .draggable, comme ceci:

$(".draggable").click(function (e) { 
    var offset = $(this).offset(), 
     theId = this.id; 
    e.stopPropagation(); 
    $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")"); 
    $.post("http://localhost/index.php", { id: theId, x: offset.left, y: offset.top }); 
}); 

Les autres changements ici sont id sont accessibles directement, par l'intermédiaire this.id, et le passage d'un objet à $.post() est plus sûr pour la sérialisation, comme je l'ai au dessus.

Même ce qui précède n'est pas tout à fait là cependant, vous voulez probablement envoyer la position lorsque vous arrêtez Traîner, en changeant ceci:

$(".draggable").click(function (e) { 

à ceci:

$(".draggable").bind("dragstop", function (e) { 

... ou dans les versions plus récentes de jQuery (1.4.2+):

$(document.body).delegate(".draggable", "dragstop", function (e) {