javascript - 限制可排序的容器/父级

Question

好的，我又来了，玩@RubaXa 的 Sortable插件(希望他在附近的某个地方，因为这个插件相当复杂......)

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

---

案例一

如果我们设置一个具有相同类型内容的div，它会立即排序。例如:

HTML

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

JavaScript

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

演示: http://jsfiddle.net/b02wfe4o/

---

案例2

如果我们设置一个具有不同类型内容的div(例如h2和h3，我们还必须指定可拖动类。例如:

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

演示: http://jsfiddle.net/qemz00eq/1/

---

案例三

如果我们并排设置 2 个(或更多)div，它的工作方式几乎相同。例如:

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

演示: 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'
});

演示: http://jsfiddle.net/j7fesLkp/8/

---

好吧，现在它没有按预期工作:

• myContainer2 元素可以在其容器内完美移动/排序。这很好。
• myContainer1 元素虽然也可以在 myContainer2 中移动，我的意思是将元素 1.1 放入 myContainer2 有效 - 当两个容器并排时不会发生这种情况。

那么，我们怎样才能禁止这种行为呢？我的意思是:每个容器的元素只能在该容器内移动，而不能在其子容器内移动。

如何做到这一点？

Answer 1

您需要将可排序对象分开，并将它们分成两个不同的组。于是在html和Js中更改其中一个组的类，将它们初始化为另一个组。