如何将draggable追加到新的可投放区域？

我有3个不同的jQuery droppable。

$(".pages").droppable({ accept: ".draggable" }); 

我有一个jQuery draggable，我正在使用克隆

  $(".draggable").draggable({ helper:'clone' }); 

 
 
Drag Me
  

如果我将我的draggable移动到droppable 1中，我需要能够附加/附加它在droppable 1中创建的克隆，以便它可以读取..

 
 
 
Drag Me
 
  

但是，如果我将它从droppable1包含区域移动到droppable2中，那么它会将它移动到droppable2下，而不是实际上删除该元素，当然要读取…

 
 
 
 
 
Drag Me
 
  

Answer 1

这是一个例子，我希望这是你想要的。

如果要检查（一旦丢弃）元素是否完全丢弃在容器内，您可以使用我的答案。 注意droppable元素是this （在drop回调函数内）

 function setDraggable(el, doClone) { el.draggable({ helper: doClone ? 'clone' : 'original', revert: true }); } $(".droppable").droppable({ accept: ".draggable", drop: function( event, ui ) { cloned = ui.helper.clone().css({'position': '', 'top': '', 'left': ''}); setDraggable(cloned, false) $( this ) .addClass( "ui-state-highlight" ) .append(cloned) ui.helper.hide(); } }); setDraggable($(".draggable"), true); 

 .droppable { border: 1px solid red; float: left; margin-left: 10px; } .draggable { border: 1px solid green; padding: 5px; margin: 0; } .draggable p { margin: 0; padding: 0; } 

    
 
 
 
 
 
 
Drag Me