jQuery UI-更新时可排序的添加类 [英] Jquery UI - Sortable add class on update

问题描述

我正在使用带有2个已连接列表的jqueries UI可排序插件.我正在尝试排序，以便在将li放入某些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
  }

我认为给我带来的只是刚刚移动的物品，但是我不确定如何知道它现在是哪个，以及它来自何方.任何帮助都会很棒，谢谢！

解决方案

下面列出的代码应能满足您的要求.我从 jquery 网站借用了HTML布局，然后添加了所需的功能.要使其正常工作，涉及几个步骤.

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

I'm using jqueries UI sortable plugin with 2 connected lists. I'm trying to get sortable to add a certain class to the li when it is dropped into certain uls. So depending on the ul it goes to, I want it to remove the old class and add a new different class which will be ul dependent. For example: I have a complete list and a archived list. I want it to change classes when moving from completed to archive and vice versa. I did some research and found:

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

Which I think gives me the item just moved, but I'm not sure how to make it know which ul its in now, and which it came from. Any help would be great, thanks!

解决方案

The code listed below should do what you want. I borrowed the HTML layout from the jquery site and then added in the functions you needed. There are several steps involved to make it work.

1. I connected the two columns using the connectWith option.
2. I added code that listens for sortreceive() which only fires when a li is moved from one column to the other. I set a variable so that I can tell when the sortstop() fires whether I'm in a new column or not.
3. Then depending on which column the li came from I remove the original class and add the class of the new column.

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

这篇关于jQuery UI-更新时可排序的添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！