在拖放後追加拖放

Question

我已經搜索了這個問題，但是找不到它。如果我錯了，請糾正我。希望如果這個問題得到解答，我可以幫助更多的人。

我先說明情況：

HTML

<div id="p1" class="base"> <!-- this is a box --> 
<div class="card">1</div> <!-- this is a dynamically created div --> 

</div> 
<div id="p2" class="base"> 
<div class="card" style="background-color: green">2</div> 

</div> 

我有像可投放多個盒子。當你點擊一個盒子時，一個div將被創建並附加到盒子上，而div是一個可拖動的。

我已經想出瞭如何在多個框之間拖動div。 這裏是問題：

當每個盒子有一個div放入它時，我希望能夠交換盒子之間的div，並將它們附加到盒子的新盒子。

例如： 方框1有div 1和方框2有div 2.我想交換它們，所以方框1有div 2和方框2將div 1作爲子節點附加到它們。

我也做了這大致顯示瞭如何目前有我的代碼示例： http://jsfiddle.net/h7ySb/

$(".card").draggable({ 
revert: true, 
zIndex: 10, 
snap: ".base", 
snapMode: "inner", 
snapTolerance: 40, 

start: function (event, ui) { 
    lastPlace = $(this).parent(); 
} 

}); 

$(".base").droppable({ 
drop: function (event, ui) { 

    ui.draggable.detach().appendTo($(this)); 

    var dropped = ui.draggable; 
    var droppedOn = this; 

    if ($(droppedOn).children().length > 0) { 
     $(droppedOn).children().detach().appendTo($(lastPlace)); 
    } 

} 
}); 

this question看起來有點像我想要的東西，但它不拖動附加到新的可棄。

Answer 1

我自己找到了答案。

你可以在這裏找到：

http://jsfiddle.net/Colinch/h7ySb/6/

如果您使用的是被交換動態創建的div，您需要更改代碼一點點。

在創建動態創建的div：

element.draggable({ 
      revert: true, 
      zIndex: 10, 
      snap: ".base", 
      snapMode: "inner", 
      snapTolerance: 40, 
}); 

，你必須把代碼可投放在您創建的div之外的功能：

$(".base").droppable({ 
      drop: function (event, ui) { 
       var dropped = ui.draggable; 
       var droppedOn = this; 
       lastPlace = dropped.parent().attr("id"); 

       if ($(droppedOn).children().length > 0) { 

        $(droppedOn).find(".card").detach().appendTo($("#"+lastPlace)); 

       } 

       $(dropped).detach().css({ 
        top: 0, 
        left: 0 
       }).appendTo($(droppedOn)); 


      } 

     }); 

我應該感謝從傢伙另一個問題（請參閱我的第一篇文章中的鏈接）瞭解一些代碼。 希望我可以幫助這個人。