Question

任何人都可以通过告诉我在下面的给定代码中拖动第一个时间元素时它可以正常工作但是当拖动新元素时，之前创建的元素的draggable属性将丢失。如何在不丢失的情况下进行拖动？

 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

如果draggable位于droppable中，那么当您在droppable的innerHTML上进行书写时，您将从DOM中删除它。您只需获取现有内容并向其中添加更多HTML，然后将其写回容器。这实际上删除了容器内的DOM元素，并将它们替换为与旧元素完全相同的新元素。旧元素上的任何处理程序都不会重新应用。我要关注的另一件事是你的变量没有作用于包含块，但看起来是在全局命名空间中。当然，您只包含一个片段，因此我可能会误解代码的应用程序。

顺便说一句，你最好（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);
                 }
      });
}
...

jquery draggable元素丢失了

1 个答案: