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

Question

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

感谢您提前提供的任何帮助!

这是脚本:

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

因此，只需指定 #sortable2 与 #sortable1 连接，但将 #sortable1 中的参数留空即可。

类似于:

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

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