jquery élément draggable perdu

Question

Quelqu'un peut-il m'aider en me disant que dans le code ci-dessous lorsque le premier élément est déplacé, cela fonctionne bien mais lorsqu'un nouvel élément est déplacé, la propriété draggable de l'élément précédemment créé est perdue. Comment puis-je faire le glisser sans le perdre?

if(tag==normal_tag1.id) 
    {    
     normal_tag_d=' <div id="Normal_Tag1_div_dummy'+count1+'" class ="Normal_Tag1_div_dummy" >'+ 'Normal DUMMY</div>'; 
     document.getElementById('droppable').innerHTML+=normal_tag_d; 
     var idx='#Normal_Tag1_div_dummy'+count1; 
     $(idx).draggable(
     { 
      revert: 'invalid' 
     } 
     ); 
     var droppable="#droppable"; 
     $(droppable).droppable({ 
      drop: function(ev,ui) { 
      alert(ui.draggable); 
      } 
     }); 
     count1++;   
    } 
else if(tag==normal_tag2.id) 
    { 
     normal_tag2_d=' <div id="Normal_Tag2_div_dummy'+count2+'" class ="Normal_Tag2_div_dummy" >'+ 
      'Normal DUMMY2</div>'; 
     var id='#Normal_Tag2_div_dummy'+count2; 
     document.getElementById('droppable').innerHTML+=normal_tag2_d; 
     $(id).draggable({ 
      revert: 'invalid' 
     }); 
     $("#droppable").droppable({ 
     drop: function() { 

     } 
     }); 
     count2++; 
    } 

Answer 1

Si le draggable est à l'intérieur du largable, vous enlevez des DOM lorsque vous écrivez sur le innerHTML du largable. Vous prenez simplement le contenu existant et ajoutez un peu plus de HTML, puis vous le réécrivez dans le conteneur. Cela supprime réellement les éléments DOM à l'intérieur du conteneur et les remplace par de nouveaux qui ressemblent exactement aux anciens. Les gestionnaires des anciens éléments ne sont pas réappliqués. L'autre chose qui m'inquiète est que les variables ne sont pas étendues au bloc conteneur, mais plutôt à l'espace de noms global. Bien sûr, vous avez seulement inclus un extrait, donc je peux mal comprendre l'application du code sur les deux points.

BTW, vous feriez mieux (IMO) en utilisant jquery pour ajouter les éléments au lieu de javascript simple.

if (tag==normal_tag1.id) 
{    
     $('<div id="Normal_Tag1_div_dummy'+count1+'" class ="Normal_Tag1_div_dummy" >'+ 'Normal DUMMY</div>') 
      .appendTo('#droppable') // note this doesn't clear #droppable 
      .draggable({ 
       revert: 'invalid' 
      }); 
     $('#droppable').droppable({ 
      drop: function(ev,ui) { 
        alert(ui.draggable); 
       } 
     }); 
} 
...