jQuery〜可拖动函数不能在追加对象中工作

Question

当我点击并追加一个新的div调用block2时，可拖动的拖动&停止不起作用？

如何解决？

DEMO：http://jsfiddle.net/hbGkN/1/

HTML

<div id="btn"><input name="click" type="button" value="Click" /></div> 
<div class="block1" style=" width:100px; height:100px; background:orange;">I am Block1</div> 

JS

$('#btn').click(function(){ 
    var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>'); 
    $("#btn").parent().append($newDiv); 

}); 


$('.block1').draggable({ 

      drag: function() { 
       $('.block1').text('Drag Now!'); 
      }, 
      stop: function() { 
       $('.block1').text('Stop Now!'); 
      } 

     }); 



$('.block2').draggable({ 

      drag: function() { 
       $('.block2').text('Drag Now!'); 
      }, 
      stop: function() { 
       $('.block2').text('Stop Now!'); 
      } 

     }); 

Answer 1

你应该试试这个，因为， '块2' 类的div不存在于DOM，因此代码不会能够为其添加可拖动。所以，在将'block2'添加到DOM之后，您应该调用它的可拖动。然后它会像你一样工作。

$('#btn').click(function(){ 
    var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>'); 
    $("#btn").parent().append($newDiv); 

    $('.block2').draggable({ 
     drag: function() { 
      $('.block2').text('Drag Now!'); 
     }, 
     stop: function() { 
      $('.block2').text('Stop Now!'); 
     } 
    }); 

}); 

检查这个DEMO

Answer 2

的问题是附加的DOM元素不是“活”如果你把这么一直没有适用于它的draggable方法。该代码很好地满足了这个目的。

function drag(e) { 
    $(e.target).text('Drag Now!'); 
} 
function stop(e) { 
    $(e.target).text('Stop Now!'); 
} 

$('#btn').click(function(){ 
    var newDiv = $('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>'); 
    $(newDiv).appendTo($(this).parent()).draggable({drag: drag, stop: stop}); 
}); 

$('.block1').draggable({drag: drag, stop: stop}); 

由于您drag和drop方法是相同的，更有意义重用他们。

Answer 3

更简洁的解决方案是在追加完成后调用函数可拖动。

$('#btn').click(function(){ 
    var newDiv = $('<div class="block2" >Block2</div>'); 
    $(newDiv).appendTo($(this).parent()); 

    $('.block2').draggable(); 
}); 

这样你就可以将所有的功能拖拽并停下来，直到它开始生效。