这是我需要的:能够在一个可排序的和几个可放置的 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 的精确描述。
最佳答案
您需要为 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>
关于javascript - 如何在 droppable 和 sortable 之间拖放元素(两种方式)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13104016/