Пользовательский интерфейс Jquery - Сортируемый добавляемый класс при обновлении

Question

Я использую сортируемый плагин jqueries UI с 2 подключенными списками.Я пытаюсь получить возможность сортировки, чтобы добавить определенный класс в li, когда он попадает в определенные ul.Таким образом, в зависимости от 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

Приведенный ниже код должен делать то, что вы хотите.Я позаимствовал HTML-макет из jquery - jquery - запрос сайт, а затем добавил в него необходимые вам функции.Есть несколько шагов, необходимых для того, чтобы это сработало.

1. Я соединил две колонки, используя connectWith вариант.
2. Я добавил код, который прослушивает sortreceive() который срабатывает только тогда, когда li перемещается из одного столбца в другой.Я устанавливаю переменную, чтобы я мог определить, когда sortstop() срабатывает независимо от того, нахожусь я в новой колонке или нет.
3. Затем, в зависимости от того, из какого столбца был получен 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>

Answer 2

но это уже есть, используя 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 (пользовательский интерфейс) ;)