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

我正在使用带有2个连接列表的jUI可排序插件。我正在尝试排序，以便在将某个类放入某个uls时将其添加到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，它来自哪个ul。任何帮助都会很好，谢谢

下面列出的代码应该满足您的要求。我从网站上借用了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>


#sortable1，#sortable2{列表样式类型：无；边距：0；填充：0；浮点：左；边距右：10px；}
#可排序1 li，#可排序2 li{边距：0 5px 5px 5px；填充：5px；字体大小：1.2em；宽度：120px；}
.ui状态默认值{背景颜色：#ccc；}
.ui状态突出显示{背景色：#fff；}
var列表；
$（函数（）{
$（'#可排序1'）。可排序({
连接到：“#可排序2”
}).disableSelection（）；
$（'#可排序2'）。可排序({
连接到：“#可排序1”
}).disableSelection（）；
$（'#sortable1'）.bind（'sortreceive'，函数（事件，用户界面）{
list=“不同”；
});
$（'#sortable2'）.bind（'sortreceive'，函数（事件，用户界面）{
list=“不同”；
});
$（'#sortable2'）.bind（'sortchange'，函数（事件，用户界面）{
list=“相同”；
});
$（'#sortable1'）.bind（'sortchange'，函数（事件，用户界面）{
list=“相同”；
});
$（'#sortable1'）.bind（'sortstop'，函数（事件，用户界面）{
如果（列表==“不同”）{
$（'#'+ui.item[0].id）.removeClass（“ui状态默认值”）；
$（'#'+ui.item[0].id）.addClass（“ui状态突出显示”）；
}
列表=”；
});
$（'#sortable2'）.bind（'sortstop'，函数（事件，用户界面）{
如果（列表==“不同”）{
$（'#'+ui.item[0].id）.removeClass（“ui状态突出显示”）；
$（'#'+ui.item[0].id）.addClass（“ui状态默认值”）；
}
列表=”；
});
});

第1项
第2项
第3项
第4项
第5项


第6项
第7项
第8项
第9项
第10项

但它已经在那里使用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)
})

注意：将firebug与console.log（事件）和console.log（ui）一起使用，可以节省大量时间；）