如何在可放置和可排序之间拖放元素（两种方式）？

Question

这就是我所需要的： 能够在可排序和可拖放的jquery小部件之间拖放元素。

已经实现并起作用的东西：在droppable之间和同一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示例 。

备注：

在此处无法使用带有connectWith选项的三个sortables，因为我希望不对droppables中的元素进行排序。 在droppable内部，用户应该能够不受限制地自由移动元素（已经实现，请参阅jsfiddle示例）。

带有可拖动和可排序的jQuery ui示例也无济于事，因为它显示了如何通过拖放将元素的副本插入可排序列表，而不是如何将可拖动元素移动到已排序列表，相反：如何移动可排序的排序列表元素（我想要的）。

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

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/