定义 Sortable 接受什么？

Question

我如何定义在可排序中接受哪些项目？

比如，假设我有以下伪标记：

<ul id="draggable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li class="nodrag">Item 3</li>
   <li>Item 4</li>
</ul>

<ul id="sortable">

</ul>

我使用 Draggable 中的 connectToSortable 选项将其连接到可排序对象。

由于我在 sortables 中有 sortables (INCEPTION!! ;) ) 我希望能够决定是否允许将可拖动对象拖放到特定的 sortable 上。

我该怎么做？我目前使用 sortable stop 事件来操作放置的对象 - 如果它包含 nodrag 类，我尝试删除该对象，但仍然显示“snap”效果（可拖动对象在可排序对象中缓慢移动到位的效果）

有什么办法可以做到吗？

Answer 1

我正在编写的拖放应用程序也遇到了类似的问题。我遇到的问题是，我有 3 个这样的可排序列表：

<ul class="apple">  <!--  accepts apples -->
</ul>

<ul class="apple orange">  <!--  accepts apples and oranges -->
</ul>

<ul class="orange banana">  <!--  accepts oranges and bananas -->
</ul>

然后我有了另一个主列表，其中包含可以拖到这些列表中的苹果、橙子和香蕉。问题显然是限制可拖动对象，以使它们不能被放入不兼容的列表中。

我必须做的是使用可拖动对象上的 connectToSortable 选项来指定它们可以放入哪些列表中。所以我可能会像这样定义我的可拖动对象：

<li class="drag-apple">...</li>
<li class="drag-orange">...</li>
<li class="drag-banana">...</li>

$(li.drag-apple).draggable({ connectToSortable: '.apple', ... });
$(li.drag-orange).draggable({ connectToSortable: '.orange', ... });
$(li.drag-banana).draggable({ connectToSortable: '.banana', ... });

有了这个，可拖动对象将只针对适当的列表。

在您的情况下，我不确定嵌套的 sortables 是否会产生额外的复杂性。但是，您可能想查看一个嵌套的 sortables 插件 (nested Sortable)。希望类似的技术可以在那里发挥作用。