Jquery 可排序框限制

Question

对于那些熟悉由 Jonny von Adrian (http://johnny.github.io/jquery-sortable/) 创建的 sortable 的人，

有没有办法说，限制一个盒子的元素，使它们只能在它自己和另一个盒子之间拖动，即使有多个盒子？现在我正在创建一个界面，允许用户从一个主题框拖到另一个主题框，但这会导致问题，因为他们可以将一个元素从“时间”框拖到“课程”框中，反之亦然。

我还想知道当盒子里什么都没有的时候，是否有办法将盒子扩大到一定的高度。现在如果一个盒子是空的，这有点令人困惑，因为用户可能不知道可以将项目拖入其中。

Answer 1

这是我第一次看到它，但是在我快速浏览一下他的documentation 之后，我可能会有所帮助。似乎包含两个与您的兴趣相关的选项，"exclude" 和“isValidTarget”。

"isValidTarget" 需要一个回调函数，它被一个 $item 参数调用，它包含 - 你猜对了 - 被拖动的元素，以及第二个参数“container”，它是接收正在被拖动的项目的元素拖着。剩下的就看你了。玩得开心！

这里有一个关于排除的基本用法的快速fiddle：

$(function() {
  $("ol.example").sortable({
    containerPath: "> li",
    containerSelector: "ol",
    exclude: "ol ol > li"
  });
  $("ol.example ol").sortable();
});

<ol class='example'>
  <li>
    Restricted
    <ol>
      <li>Items</li>
      <li>cannot</li>
      <li>be added</li>
      <li>Here.</li>
    </ol>
  </li>
  <li>
    Open 1
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </li>
  <li>Open 2</li>
  <li>Open 3</li>
</ol>