Question

以下是我需要的：能够在可排序和多个可放置的jquery小部件之间拖放元素。

已经实施和工作的内容：在droppables之间和同一个droppable中拖放元素。

<ul class="sortable" style="background-color:#eeeeee;height:200px">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<ul class="droppable" style="background-color:#eeeeee;height:150px">
   <li class="draggable ui-state-default">Drag me down1</li>
   <li class="draggable ui-state-default">Drag me down2</li>

</ul>

<ul class="droppable" style="background-color:#eeeeee;height:150px">
   <li class="draggable ui-state-default">Drag me down3</li>
</ul>

请在此处查看完整的jsfiddle example。

备注：

这里不能使用带有connectWith选项的三个可排序项，因为我希望不对droppables中的元素进行排序。在droppables中，用户应该能够自由地移动元素，没有约束（已经实现，请参阅jsfiddle示例）。

jquery ui example with draggable and sortable也没有帮助，因为它显示了如何通过拖放将元素的副本插入可排序列表，而不是如何将可拖动元素移动到排序列表而反之亦然：如何将已排序的列表元素移动到droppable（我想要的）。

接受的答案是对可行的解决方案或编辑过的小提琴的精确描述。

Answer 1

您需要在draggable内的元素中添加sortable类，以使其可以拖放到droppable。

<ul class="sortable" style="background-color:#eeeeee;height:200px">
    <li class="draggable ui-state-default">Item 1</li>
    <li class="draggable ui-state-default">Item 2</li>
    <li class="draggable ui-state-default">Item 3</li>
</ul>

http://jsfiddle.net/uG62q/1/

如何在droppable和sortable之间拖放元素（以两种方式）？

1 个答案: