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

Question

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

什么已经实现和工作：拖放元素之间和相同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在这里。

备注：

采用三个sortables与connectWith选项是不可能在这里，因为我想在droppables元素进行排序。在droppables里面，用户应该能够自由地移动元素，没有限制（已经实现，参见jsfiddle示例）。

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

接受的答案是一个解决方案的工作或编辑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/