3

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

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

情况1

如果我们设置一个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不同类型的内容（例如h2s 和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'
});

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

案例3

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

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

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

怎么可能呢？

4

1 回答 1

2

您将分开分类，并将它们分成两个不同的组。所以在html和Js中更改其中一个组的类以将它们初始化为另一个组。

于 2014-11-12T10:38:58.940 回答