Question

我正在使用带有2个连接列表的jqueries UI可排序插件。我正在尝试排序，以便将某个类添加到li中，当它被放入某些uls时。因此，根据它的ul，我希望它删除旧类并添加一个新的不同类，它将依赖于ul。例如：我有一个完整的列表和一个存档列表。我希望它在从完成移动到存档时更改类，反之亦然。我做了一些研究，发现：

 receive: function(event, ui) { //Element ready to be dropped to new place
    source_element = $(ui.item); // here is your selected item
  }

我认为这个项目只是让我感动，但我不知道如何让它知道它现在是哪个，它来自哪个。任何帮助都会很棒，谢谢！

Answer 1

下面列出的代码可以做你想要的。我从jquery站点借用了HTML布局，然后添加了您需要的功能。有几个步骤可以使它发挥作用。

我使用connectWith选项连接了两列。
我添加了侦听sortreceive()的代码，该代码仅在li从一列移动到另一列时触发。我设置了一个变量，以便我可以判断sortstop()何时触发我是否在新列中。
然后根据li来自哪一列，我删除原始类并添加新列的类。



    <style type="text/css">
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

    .ui-state-default { background-color: #ccc;}
    .ui-state-highlight { background-color: #fff;}
    </style>
    <script type="text/javascript">
    var list;
    $(function() {

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

            $('#sortable1').bind('sortreceive', function(event, ui) {
                list = "different";         
            });

            $('#sortable2').bind('sortreceive', function(event, ui) {
                list = "different";         
            });

            $('#sortable2').bind('sortchange', function(event, ui) {
                list = "same";
            });

            $('#sortable1').bind('sortchange', function(event, ui) {
                list = "same";
            });

            $('#sortable1').bind('sortstop', function(event, ui) {
                if(list == "different") {
                    $('#'+ui.item[0].id).removeClass("ui-state-default");
                    $('#'+ui.item[0].id).addClass("ui-state-highlight");
                }
                list = "";
            });
            $('#sortable2').bind('sortstop', function(event, ui) {
                if(list == "different") {
                    $('#'+ui.item[0].id).removeClass("ui-state-highlight");
                    $('#'+ui.item[0].id).addClass("ui-state-default");
                }
                list = "";
            });

    });

    </script>


    <div class="demo">

    <ul id="sortable1" class="connectedSortable">
        <li id="li1" class="ui-state-default">Item 1</li>
        <li id="li2" class="ui-state-default">Item 2</li>
        <li id="li3" class="ui-state-default">Item 3</li>
        <li id="li4" class="ui-state-default">Item 4</li>
        <li id="li5" class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li id="li6" class="ui-state-highlight">Item 6</li>
        <li id="li7" class="ui-state-highlight">Item 7</li>
        <li id="li8" class="ui-state-highlight">Item 8</li>
        <li id="li9" class="ui-state-highlight">Item 9</li>
        <li id="li10" class="ui-state-highlight">Item 10</li>
    </ul>

    </div>

Answer 2

但它已经在使用event.target了！

$('#sortable1').sortable({connectWith: '#sortable2,#sortable3'}).disableSelection();
$("#sortable2,#sortable3").bind("sortreceive",function(event,ui){
        // current item list   (event.target)
        // source item list   (ui.sender)
})

注意：使用带有console.log（event）和console.log（ui）的firebug可以节省大量时间;）

Jquery UI - 可更新的可排序添加类

2 个答案: