在拖放后追加拖放

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)); 


      } 

     }); 

我应该感谢从家伙另一个问题（请参阅我的第一篇文章中的链接）了解一些代码。 希望我可以帮助这个人。