Comment appliquer automatiquement un effet de glisser-déposer à un élément ajouté dynamiquement?

Question

J'utilise jquery ui pour appliquer un effet de glisser-déposer sur une série de DIVs, par exemple:

<div class="draggable">...</div> 
<div class="draggable">...</div> 
<div class="draggable">...</div> 
<div class="draggable"> this DIV was dynamically added, not draggable </div> 

Le problème est dynamiquement ajouté DIVs n'aura pas cet effet appliqué, comment puis-je appliquer cet effet sur nouveaux membres aussi?

Answer 1

Vous ne pouvez pas utiliser directement la fonction .live() avec .draggable(), mais vous pouvez utiliser .live() avec l'événement mouseover et réattacher .draggable() au passage de la souris comme ceci.

$('.draggable').live('mouseover',function(){ 
    $(this).draggable(); 
}); 

Answer 2

Jetez un oeil à la jQuery .live(). Je crois que vous pourriez l'utiliser ici. Si ce n'est pas le cas, ajoutez simplement .draggable() lorsque vous créez votre élément.

Answer 3

Vous aimerez aussi prendre un butin à la méthode delegate() introduit avec jQuery 1.4 qui est légèrement mieux que vivre()

Voici un article comparant les deux approches - http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/