首页 文章

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

提问于
浏览 次
1

我在jQuery中有两个连接的sortables . 它们被称为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>
javascript jquery jquery-ui

2 回答

  • 1

    connectWith参数是一种单向关系，如下所示：http://api.jqueryui.com/sortable/#option-connectWith

    因此，简单地指定＃sortable2与＃sortable1连接，但将＃sortable1中的参数保留为空白就可以了 .

    就像是：

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

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

    回复于
  • 0
    $(function() {
    $( "#sortable2" ).sortable({
        connectWith: "#sortable1"
    }).disableSelection();

});

    试试这个

    回复于

相关问题