javascript - 如何在 droppable 和 sortable 之间拖放元素(两种方式)？

Question

这是我需要的:能够在一个可排序的和几个可放置的 jquery 小部件之间拖放元素。

已经实现并有效的内容:在可放置项之间和同一可放置项内拖放元素。

<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在这里。

备注:

使用三个 sortables connectWith选项在这里是不可能的，因为我希望 droppables 中的元素不被排序。在 droppables 内部，用户应该能够不受限制地自由移动元素(已经实现，参见 jsfiddle 示例)。

jquery ui example with draggable and sortable也没有帮助，因为它展示了如何通过拖放将元素的副本插入可排序列表，而不是如何将可拖动元素移动到排序列表，相反:如何将排序列表元素移动到可放置(我想要什么)。

接受的答案是对有效解决方案或经过编辑的 js fiddle 的精确描述。

Answer 1

您需要为 sortable 中的元素添加一个 draggable 类，使它们可以拖动到 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/