jquery ziehbares Element verloren

Question

Kann mir jemand helfen, indem Sie mir sagen, dass in dem unten angegebenen Code, wenn das erste Mal-Element gezogen wird, es funktioniert, aber wenn ein neues Element gezogen wird, ist die ziehbare Eigenschaft des zuvor erstellten Elements verloren. Wie kann ich ziehen, ohne es zu verlieren?

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

Wenn die ziehbar innerhalb des abwerfbaren ist, bist du es aus dem DOM zu entfernen, wenn Sie über die innerHTML- des abwerfbaren schreiben. Sie nehmen einfach den vorhandenen Inhalt und fügen etwas HTML hinzu und schreiben ihn dann zurück in den Container. Dadurch werden die DOM-Elemente im Container tatsächlich entfernt und durch neue ersetzt, die genau wie die alten aussehen. Alle Handler auf den alten Elementen werden nicht erneut angewendet. Die andere Sache, um die ich mich kümmern müsste, ist, dass Sie Variablen nicht auf den umgebenden Block beschränken, sondern im globalen Namespace aussehen. Natürlich haben Sie nur ein Snippet eingefügt, so dass ich die Anwendung des Codes in beiden Fällen falsch verstehe.

BTW, Sie wären besser dran (IMO) mit jquery für das Hinzufügen der Elemente als auch anstelle von einfachem Javascript.

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); 
       } 
     }); 
} 
...