jQuery UI Droppable：如何放下鼠标松开的元素

Question

我正在使用 Droppable 方法使容器接收 div 个元素。

这个容器也是可排序的。

jsfiddle: http://jsfiddle.net/r5vrrcxv/2/

jQuery('#source').sortable();

jQuery('#receiver').sortable().droppable({
    drop: function( event, ui ) {
        $( "<div></div>" ).text( ui.draggable.text() ).appendTo( this );
    }
});

我的问题：当我将元素拖放到接收器中时，元素总是落在接收器的底部。

我在寻找什么：相反，由于接收器中的元素是可排序的，我希望放置在接收器中的元素位于附近放置它们的元素的上方或下方。

Droppable 或 Sortable 中是否有允许这样做的内置事件或方法？

感谢您的帮助

Answer 1

我不确定您是否真的需要 Droppable。查看 jQueryUI 上的“连接列表”demo。

这允许您按顺序将可排序元素从一个列表拖到另一个列表。您使用可排序对象中的 connectWith 选项连接列表：

HTML:

<div id="source" class="connectedSortable">
    <div>aaaaaaa</div>
    <div>bbbbbbb</div>
    <div>ccccccc</div>
</div>


<div id="receiver" class="connectedSortable">
    <div>gggggggg</div>
    <div>hhhhhhhh</div>
    <div>iiiiiiii</div>
</div>

jQuery:

$( "#source, #receiver" ).sortable({
  connectWith: ".connectedSortable"
}).disableSelection();

如果你希望关系是单向的（即你不能在将元素放入接收器后将它们拖回源），你只需单独声明 sortables：

$( "#source" ).sortable({
      connectWith: ".connectedSortable"
}).disableSelection();

$( "#receiver" ).sortable().disableSelection();

这是您更新后的 fiddle：http://jsfiddle.net/r5vrrcxv/3/