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中有可排序（INCEPTION !!;））我希望能够决定是否允许将draggable放在特定的可排序上。

我该怎么做？我目前使用可排序停止事件来操作被删除的对象 - 如果它包含nodrag类，我尝试删除该对象，但仍然显示“快照”效果（可拖动的可拖动缓慢移动的效果）

我有什么方法可以做到这一点吗？

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>

然后我有另一个主要清单，包括可以拖入这些清单的苹果，橙子和香蕉。问题显然是限制可拖动的，以便它们不会被丢弃到不兼容的列表中。

我需要做的是使用draggables上的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', ... });

有了这个，draggables将只针对相应的列表。

在您的情况下，我不确定嵌套的sortables是否会产生额外的复杂性。但是，您可能需要查看嵌套的sortables插件（nested Sortable）。希望类似的技术可以在那里工作。

定义Sortable接受的内容？

1 个答案: