限制容器/父项为Sortable [英] Restrict container/parent for Sortable

问题描述

好的，所以这里我再次使用@ RubaXa的可排序插件（希望他是这里有一个地方，因为这只是相当复杂...）

一些发现（我花了一些时间充分理解的机制，但我认为我' m很对）

---

案例1

一个 div 具有相同类型的内容，它可以立即排序。例如：

HTML

  ; div id =myContainer> 
< h3>第1项< / h3> 
< h3>项目2< / h3> 
< / div> 
  

JavaScript

  new Sortable（document.getElementById（myContainer））; 
  

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

---

如果我们用不同类型的内容设置一个 div （例如 h2 ），则情况2



s和 h3 s，我们还必须指定 draggable p>

HTML

 < div id = myContainer> 
< h3 class =myDraggable>项目1< / h3> 
< h4 class =myDraggable>项目2< / h4> 
< ; / div> 
  

JavaScript

  new Sortable（document.getElementById（myContainer），{
 draggable：'.myDraggable'
}）; 
  

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

---

案例3

如果我们设置2（或更多） div 一样的方法。例如：

HTML

  ; div id =myContainer1> 
< h3 class =myDraggable>项目1.1< / h3> 
< h4 class =myDraggable>项目1.2< / h4> 
< / div> 
 
< div id =myContainer2> 
< h3 class =myDraggable>项目2.1< / h3> 
< h4 class =myDraggable>项目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>项目1.1< / h3> 
< h4 class =myDraggable>项目1.2< / h4> 
 
< div id =myContainer2> 
< h3 class =myDraggable>项目2.1< / h3> 
< h4 class =myDraggable>项目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 工作 - 这是没有发生时，两个容器并排。

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

如何实现？

解决方案

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

OK, so here I am again, playing with @RubaXa's Sortable plugin (and hopefully he is somewhere around here, as this one is simply rather complicated...)

A few discoveries (it took me some time to fully understand the mechanism, but I think I'm quite right)

---

Case 1

if we set one div with same-type contents, it's instantly sortable. E.g.:

HTML

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

JavaScript

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

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

---

Case 2

if we set one div with different-type contents (e.g. h2s and h3s, we also have to specify the draggable class. E.g.:

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/

---

Case 3

if we set 2 (or more) divs, side-by-side, it works pretty much the same way. 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'
});

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

---

THE ISSUE

Now, what if sortable A is a child of sortable 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/

---

Well, now this does not work as expected:

• myContainer2 items can be moved/sorted perfectly within their container. Which is fine.
• myContainer1 items though can be moved in myContainer2 as well, I mean take element 1.1 and put it inside myContainer2 works - which wasn't happening when the two containers were side-by-side.

So, how can we disable that behaviour? I mean: each container's items must move ONLY within that container and not within its children.

How can that be done?

解决方案

You will gave to separate the sortables, and divide them in two different groups. So change the class of one of the groups in html and Js to initialize them as another group.

这篇关于限制容器/父项为Sortable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！