好的,我又来了,和 @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
具有不同类型的内容(例如h2
s and 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'
});
Demo: http://jsfiddle.net/qemz00eq/1/ http://jsfiddle.net/qemz00eq/1/
Case 3
如果我们设置 2 个(或更多)div
s,并排,它的工作方式几乎相同。例如。:
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
有效 - 当两个容器并排放置时,这种情况不会发生。
那么,我们如何禁用这种行为呢?我的意思是:每个容器的项目必须仅在该容器内移动,而不能在其子容器内移动。
那怎么办呢?