Question

好的，所以我再来一次，和@ RubaXa的Sortable插件一起玩（希望他在这里的某个地方，因为这个很简单......）

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

<案例1

如果我们设置一个div具有相同类型的内容，它可以立即排序。 E.g：

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 s和h3 s，我们还必须指定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'
});

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

<案例3

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

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作品中 - 这不是＆＃39;当两个容器并排时，就会发生这种情况。

那么，我们怎样才能禁用这种行为？我的意思是：每个容器的物品必须仅在该容器内移动，而不是在其子容器内移动。

怎么办呢？

Answer 1

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

限制Sortable的容器/父级

问题

1 个答案: