Les objects déplaçables jQuery perdent leur capacité de glissement après avoir été échangés (avec l’exemple jsfiddle)

J’ai deux éléments li qui sont jQuery draggable. Lorsque je déplace la boîte “1” par-dessus la “2”, elles sont échangées. Jusqu’ici tout va bien. (Le délai corrige un autre problème décrit ici .) Cependant, les éléments ne sont plus déplaçables, même après avoir réinitialisé leur option déplaçable.

Une idée de comment réparer ça? plein jsfiddle de travail ici

     jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true}; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event, ui) { window.setTimeout("Swap()", 600); } }); }); function Swap() { $('#one').swapWith($('#two')); //trying to fix problem where elements can't be dragged anymore $("li").draggable("destroy"); $("li").draggable(options); }    
  • one
  • two

Donc, après avoir joué avec votre code, voici la conclusion à laquelle je suis arrivé.

Il semble que la méthode jqueryui déplaçable effectue le suivi de ses objects séparément. Lorsque vous clonez, ce suivi n’est pas cloné. J’ai modifié votre code comme suit:

 jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true).appendTo($("#wrapper")); var copy_from = $(this).clone(true).appendTo($("#wrapper")); //$(to).replaceWith(copy_from); //$(this).replaceWith(copy_to); }); }; 

Vous pouvez voir les résultats fascinants http://jsfiddle.net/XkUDv/16/

Comme vous pouvez le constater, si vous faites glisser les nouveaux objects clonés, l’outil original est déplacé, pas l’object cloné.

Ce n’est pas une réponse, mais j’espère que cela aidera.

METTRE À JOUR:

après avoir examiné de plus près clone, j’ai changé le javascript en:

  

Maintenant, ça marche comme tu le voulais 🙂

J’imagine que le problème est que, puisque clone (true) copie les gestionnaires d’événements, lorsque vous essayez de rattacher l’élément déplaçable aux nouveaux clones, il voit les anciens gestionnaires d’événements et ignore les éléments. Donc au lieu de clone (true), je l’ai changé en clone ();

J’espère que cela pourra aider!

Version de travail: http://jsfiddle.net/XkUDv/21/