jQuery UI Droppable：如何在释放鼠标的位置放置元素

我使用Droppable方法使容器接收div元素

这个容器也是可排序的

jsfiddle：

jQuery（'#source'）.sortable（）；
jQuery（'#receiver'）.sortable（）.dropable({
drop：函数（事件、用户界面）{
$（“”）.text（ui.draggable.text（））.appendTo（this）；
}
});

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

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

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

---

谢谢您的帮助

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

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

HTML: 如果希望关系是单向的（即，在将元素拖放到接收器中后，不能将其拖回源），只需单独声明可排序表：

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

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

这是你最新的小提琴：

<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>

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

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

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