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

Question

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

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

我认为这给了我刚刚移动的项目，但我不知道如何让它知道它现在在哪个 ul 中，以及它来自哪个。任何帮助都会很棒，谢谢!

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>