jQuery ui排序列表中的可排序项和子项

如果将任何子元素拖动到任何父元素之外，则会存储其位置。 这是一个很大的问题。 元素必须返回上一个父级。 子元素必须能够在父元素和父元素内移动。 父元素必须能够在它们之间移动。

问题：

1. 如何禁用国外父母拖动子元素？
2. 如何让父母拖动吧？ 现在，如果第一个父级的示例向下拖动到PARENT＃2或PARENT＃3的位置，它将不会移动

码：

   $(document).ready(function(){ var sortable_element = $('.sortable'); sortable_element.sortable( { items: ".group-caption, .group-caption .group-item", handle: ".move", cursor: "move", opacity: 0.7, containment: ".sortable", placeholder: "movable-placeholder", revert: 300, delay: 150, start: function(e, ui ) { ui.placeholder.height(ui.helper.outerHeight()); } }); })   .sortable { } .group-caption { background: #D3CAAF; width: 400px; display: block; padding: 20px; margin: 0 0 15px 0; } .group-item { background: #5E5E5E; width: 300px; height: 30px; display: block; padding: 3px; margin: 5px; color: #fff; } .move { background: #ff0000; width: 30px; height: 30px; float: right; color: #fff; text-align: center; text-transform: uppercase; line-height: 30px; font-family: Arial; cursor: move; }  
 
 
PARENT #1
 
+
 
 
CHILD #1
+
 
CHILD #2
+
 
CHILD #3
+
 
CHILD #4
+
 
CHILD #5
+
 
CHILD #6
+
 
CHILD #7
+
 
CHILD #8
+
 
CHILD #9
+
 
CHILD #10
+
 
CHILD #11
+
 
CHILD #12
+
 
CHILD #13
+
 
CHILD #14
+
 
CHILD #15
+
 
CHILD #16
+
 
 
 
 
PARENT #2
 
+
 
 
CHILD #1
+
 
CHILD #2
+
 
CHILD #3
+
 
CHILD #4
+
 
 
 
 
PARENT #3
 
+
 
 
CHILD #1
+
 
CHILD #2
+
 
CHILD #3
+
 
CHILD #4
+
 
CHILD #5
+
 
CHILD #6
+
 
CHILD #7
+
 
CHILD #8
+
 
 
  

Answer 1

如果我理解你正确你需要两个排序 – 一个用于父母，一个用于孩子，然后孩子应该与父母联系，你需要一个tolerance属性。

 // Sort the parents $(".sortable").sortable({ containment: "parent", items: "> div", handle: ".move", tolerance: "pointer", cursor: "move", opacity: 0.7, revert: 300, delay: 150, dropOnEmpty: true, placeholder: "movable-placeholder", start: function(e, ui) { ui.placeholder.height(ui.helper.outerHeight()); } }; // Sort the children $(".group-items").sortable({ containment: "parent", items: "> div", tolerance: "pointer", connectWith: '.group-items' }); 

看我的小提琴演示 。

更新＃1

更新了小提琴演示 ，仅允许孩子绑定到其父级。