将可排序的数据删除到可排序的（嵌套的div）中

我创建了一个代码，允许我将div从第1列拖动并克隆到第2列。第2列是可排序的。

这很好用，但我现在想将第1列中的div拖到已经放入第2列的div中。

到目前为止，这是我的代码：

HTML

 
Items
 
Drag me ONE
 
Drag me TWO
 
Drag me THREE
 
 
 
Drop here
  

jQuery的：

 $('.dragItem').draggable({ helper: 'clone', connectToSortable: "#column2" }); $('.dragItem').sortable({ containment: "parent" }); $('#column2').sortable({ cancel: '#cont>div', placeholder: "highlight" }); $('#column2').droppable({ accept: '.dragItem', drop: function(event, ui) { var draggable = ui.draggable; var droppable = $(this); var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); drag.appendTo(column2); } }); 

谢谢

Answer 1

项目被删除后 – 您需要将sortable和droppable应用于该div。

这是一个例子：

 $('.dragItem').draggable({ helper: 'clone', connectToSortable: "#column2,#column2 div" }); $('.dragItem').sortable({ containment: "parent" }); $('#column2').sortable({ placeholder: "highlight" }); $('#column2').droppable({ accept: '.dragItem', drop: function(event, ui) { var draggable = ui.draggable; var droppable = $(this); var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); drag.appendTo(column2); drag.sortable({ placeholder: "highlight" }); drag.droppable({ accept: ".dragItem", drop: function (event, ui) { var draggable = ui.draggable; var droppable = $(this); var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); } }) drag.css({width:'', height: ''}) } }); 

 #column1, #column2 { width: 250px; margin-right: 10px; border: 1px solid red; float: left } .droppable div { border: 1px solid blue; margin: 5px; padding: 5px; } 

    
 
Items
 
Drag me ONE
 
Drag me TWO
 
Drag me THREE
 
 
 
Drop here