jQuery-防止可排序元素在拖动开始后返回到可排序列表中

Question

我在jQuery中有两个连接的排序表。它们被称为可排序1和可排序2。当您将一个元素从sortable2中取出时，您将其放入sortable1中。在拖动开始后，用户不应该能够将元素移回sortable2(正在制作一个克隆来填补空白。)因此，一旦拖动开始，如何在sortable1中保持完整功能的同时防止它返回sortable2？

感谢您提前提供的帮助！

这是脚本：

<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable"                       
}).disableSelection();
$('.ui-state-highlight').click(function(){
if ($(this).parent().attr("id")!="sortable2") {
$(this).remove();
}
});
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable",
helper: function(e,li) {
copyHelper=li.clone(true,true).insertAfter(li);
return li.clone(true,true);
}
}).disableSelection();
});       
</script>

下面是列表后面的html片段：

<div id="symbolbay">
<p>Drop symbols here</p>
<ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Click me to delete only me</li>
<li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>

Answer 1

connectWith参数是一种单向关系，如本文所述：http://api.jqueryui.com/sortable/#option-连接

因此，简单地指定#sortable2与#sortable1连接，但将#sorable1中的参数留空就可以了。

类似于：

$(function() {
$( "#sortable2" ).sortable({
connectWith: "#sortable1"
})
$( "#sortable1" ).sortable({
})
});

http://jsfiddle.net/69vPK/2/

Answer 2

$(function() {
$( "#sortable2" ).sortable({
connectWith: "#sortable1"
}).disableSelection();
});

试试这个