如何使用jQuery在源区域和目标区域之间移动可拖动对象

如何在源区域和目标区域之间移动可拖动对象？
例如：
（图1）原始位置
（图2）然后移动一些项目
（图3）我的问题是如何在源区域和目标区域之间移动项目

PS：我已经尝试了很多可能性，如下面的地址

1. 在droppable的out事件中将jQuery可拖动对象还原回其原始容器

2. http://devilmaycode.altervista.org/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/

3. http://api.jqueryui.com/draggable/#event-stop

4. 如果validation失败，有没有办法将Jquery拖放恢复到原始位置？
5. jQuery UI – 将jQuery draggable对象恢复为原始对象？

图片1 图片2 图3

所有代码

     div ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } div ul li { margin: 5px; padding: 5px; width: 150px; }       
 
 
 
 
 
 
A
 
D
 
 
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
 
 
 
 
 
 
 
 
 
A1
 
D1
 
 
 
 
 
 
 
Item 11
 
Item 21
 
Item 31
 
 
 
 
 
    $("#a1,#a2").draggable({ connectToSortable: "#b", revert: 'invalid', }); $("#b").sortable({ revert: true, }); $("#c1,#c2").draggable({ connectToSortable: "#d", revert: 'invalid', }); $("#d").sortable({ revert: true, });  

Answer 1

您可以将它们视为连接的可排序列表：

           
 
 
 
 
 
Item A1
 
Item A2
 
 
 
 
 
 
 
Item B1
 
Item B2
 
Item B3
 
 
 
 
 
    

Answer 2

我试过另一种方法来解决这个问题

  $("#a1,#a2").draggable({ connectToSortable: "#b,#a", revert: 'invalid', }); $("#a").sortable({ revert: true, }); 

  $("#b").sortable({ revert: true, }); $("#c1,#c2").draggable({ connectToSortable: "#d", revert: 'invalid', }); $("#d").sortable({ revert: true, });