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上的“connect-lists”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/

jQuery UI Droppable：如何删除释放鼠标的元素

1 个答案:

HTML：

jQuery的：