0

这是我需要的：能够在可排序和几个可放置的 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 示例。

评论 ：

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

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

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

4

1 回答 1

0

您需要向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/

于 2012-10-27T20:56:02.690 回答