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();

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

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

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

这是你更新的小提琴：http://jsfiddle.net/r5vrrcxv/3/