限制可排序的容器/父级

好的，我又来了，和 @RubaXa 一起玩Sortable http://rubaxa.github.io/Sortable/插件（希望他就在这附近，因为这个插件相当复杂......）

一些发现（我花了一些时间才完全理解这个机制，但我认为我是对的）

Case 1

如果我们设置一个div相同类型的内容，可以立即排序。例如。：

HTML

<div id="myContainer">
     <h3>Item 1</h3>
     <h3>Item 2</h3>
</div>

JavaScript

new Sortable(document.getElementById("myContainer"));

Demo: http://jsfiddle.net/b02wfe4o/ http://jsfiddle.net/b02wfe4o/

Case 2

如果我们设置一个div具有不同类型的内容（例如h2s and h3s，我们还必须指定draggable班级。例如。：

HTML

<div id="myContainer">
     <h3 class="myDraggable">Item 1</h3>
     <h4 class="myDraggable">Item 2</h4>
</div>

JavaScript

new Sortable(document.getElementById("myContainer"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/qemz00eq/1/ http://jsfiddle.net/qemz00eq/1/

Case 3

如果我们设置 2 个（或更多）divs，并排，它的工作方式几乎相同。例如。：

HTML

<div id="myContainer1">
     <h3 class="myDraggable">Item 1.1</h3>
     <h4 class="myDraggable">Item 1.2</h4>
</div>

<div id="myContainer2">
     <h3 class="myDraggable">Item 2.1</h3>
     <h4 class="myDraggable">Item 2.2</h4>
</div>

JavaScript

new Sortable(document.getElementById("myContainer1"), {
     draggable: '.myDraggable'
});

new Sortable(document.getElementById("myContainer2"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/qeyxxj4y/ http://jsfiddle.net/qeyxxj4y/

问题

现在，如果可排序 A 是可排序 B 的子项怎么办？

HTML

<div id="myContainer1">
     <h3 class="myDraggable">Item 1.1</h3>
     <h4 class="myDraggable">Item 1.2</h4>

     <div id="myContainer2">
           <h3 class="myDraggable">Item 2.1</h3>
           <h4 class="myDraggable">Item 2.2</h4>
     </div>

</div>

JavaScript

new Sortable(document.getElementById("myContainer1"), {
     draggable: '.myDraggable'
});

new Sortable(document.getElementById("myContainer2"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/j7fesLkp/8/ http://jsfiddle.net/j7fesLkp/8/

好吧，现在这并没有按预期工作：

• myContainer2物品可以在其容器内完美移动/分类。这很好。
• myContainer1物品虽然可以移入myContainer2另外，我的意思是采取元素1.1并把它放进去myContainer2有效 - 当两个容器并排放置时，这种情况不会发生。

那么，我们如何禁用这种行为呢？我的意思是：每个容器的项目必须仅在该容器内移动，而不能在其子容器内移动。

那怎么办呢？

您将分开可排序的内容，并将它们分为两个不同的组。因此更改html和Js中其中一个组的类，将它们初始化为另一个组。