Question

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!

Answer 1

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>