jQuery可排序-将放置在外部的项目移动到连接列表

jQuery Sortable - Move item dropped outside to connected list

本文关键字:项目 移动 列表 连接 外部 排序 jQuery      更新时间:2023-09-26

我有两个相互连接的可排序列表。要将一个项目从清单1移动到清单2,我必须从清单1中拖动一个项目,然后直接放到清单2上。

我需要的是,当我从list1中拖动项目并在list1之外拖放项目时,项目应该转到list2,而不是返回到list1。这可能吗?

$('.sortable1').sortable({
   connectWith: '.sortable2'
});
$('.sortable2').sortable({
   connectWith: '.sortable1'
});
http://jsfiddle.net/0tpb8o5d/1/

小提琴:http://jsfiddle.net/0tpb8o5d/3/

使用over和out事件,你可以得到被拖拽项目的状态是在可放容器的外部或内部:

over: function (event, ui) {
    outside = false;
},
out: function (event, ui) {
    outside = true;
},

beforeStop事件中的一个简单条件完成了剩下的工作:

beforeStop: function (event, ui) {
   if (outside) {
       ui.item.prependTo('.sortable2');
   }
}