代码之家 › 专栏 › 技术社区 › ZapRowsdower910

jquery用户界面-可排序添加类更新

jquery-ui-sortable jquery-ui jquery

ZapRowsdower910 · 技术社区 · 16 年前

我使用的jqueries用户界面可排序插件有两个连接的列表。我正在尝试将某个类放入某个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
  }

我想它给了我刚刚移动的物品,但我不知道如何让它知道它现在在哪个保险商实验室,它来自哪个实验室。任何帮助都很好,谢谢!

2 回复 | 直到 13 年前

Scott Gottreu 15 年前

下面列出的代码应该满足您的需要。我从 jquery 然后添加到所需的函数中。有几个步骤可以使它工作。

我用 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>

Fareed Alnamrouti 13 年前

但它已经在使用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可以节省很多时间。