jquery可拖动元素丢失答案

【问题标题】：jquery draggable element lostjquery可拖动元素丢失
【发布时间】：2009-07-31 10:45:51
【问题描述】：

任何人都可以告诉我，在下面的给定代码中，当第一次拖动元素时它可以正常工作，但是当拖动新元素时，之前创建的元素的可拖动属性会丢失。我怎样才能在不丢失的情况下进行拖动？

 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++;
   }

【问题讨论】：

标签： jquery element draggable

【解决方案1】：

如果可拖动对象位于可放置对象内部，则当您覆盖可放置对象的 innerHTML 时，会将其从 DOM 中移除。您只需获取现有内容并向其中添加更多 HTML，然后将其写回容器。这实际上移除了容器内的 DOM 元素，并将它们替换为看起来与旧元素完全相同的新元素。旧元素上的任何处理程序都不会重新应用。我要担心的另一件事是您的变量的范围不限于包含块，而是看起来在全局命名空间中。当然，您只包含了一个 sn-p，所以我可能在这两个方面都误解了代码的应用。

顺便说一句，你最好 (IMO) 使用 jquery 来添加元素，而不是普通的 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);
                 }
      });
}
...

【讨论】：