jQuery réinitialise/rafraîchit dynamiquement les éléments draggables/triables

Question

J'ai quelques fonctions que je charge dans l'événement ready(). Ceux-ci font essentiellement glisser une liste, et d'autres zones droppable/triable. Par exemple. Vous pouvez faire glisser un clone dans plusieurs zones (listes en divs), et dans ces zones multiples, vous pouvez les trier/les réorganiser (mais uniquement dans chaque zone). Cela fonctionne parfaitement.

J'ai un bouton qui crée dynamiquement une nouvelle zone pour les objets à déposer, puis triés. Il crée parfaitement la nouvelle zone, mais vous ne pouvez pas y déposer des éléments, ou même les rendre triables. Je réalise que cela a quelque chose à voir avec le fait que je rends toutes les zones droppables/triables lors du chargement de la page en utilisant l'événement ready(), et que je ne ré-exécute pas ces fonctions dynamiquement.

J'ai essayé d'utiliser 'refresh' sur ces éléments à l'intérieur de la fonction de clic du bouton. Par exemple.

$(".field > li").draggable('refresh'); 
$(".dragrow1, .dragrow2").droppable('refresh'); 
$(".dragrow1, .dragrow2").sortable('refresh'); 

Mais cela ne fonctionne pas. Je veux éviter de répéter mon code de quelque façon que ce soit si je peux l'aider. Y a-t-il un moyen de faire ce travail? Je pensais que s'il y avait quelque chose de similaire à la fonction 'live()' que vous pouvez utiliser avec 'ready()', alors cela pourrait être une solution, mais il n'y a pas ...!

Merci. Pourquoi ne pas coder votre initialisation comme votre propre add-on jQuery?

Answer 1

Ensuite, votre code d'initialisation ainsi que le code qui ajoute des éléments dynamiques peuvent simplement configurer les choses de cette façon.

jQuery(function() { 
    jQuery.fn.myDroppableSetup = function myDroppableSetup() { 
    this.each(function() { 
     // your setup code here 
    }); 
    return this; 
    }; 
    jQuery.fn.myDraggableSetup = // ... 
}); 

Ensuite, vous pouvez simplement réutiliser que lorsque vous ajoutez des choses dynamiquement:

$('div.newlyAddedDroppable').myDroppableSetup();