JQuery UI - сортируемый добавить класс при обновлении - PullRequest
Новая
       8

JQuery UI - сортируемый добавить класс при обновлении

2 голосов
/ 22 сентября 2009

Я использую сортируемый плагин пользовательского интерфейса jqueries с 2 связанными списками. Я пытаюсь получить сортировку, чтобы добавить определенный класс в li, когда он добавляется в определенные uls. Таким образом, в зависимости от ul, к которому он идет, я хочу удалить старый класс и добавить новый другой класс, который будет зависеть от ul. Например: у меня есть полный список и заархивированный список. Я хочу, чтобы он менял классы при переходе от завершенного к архивному и наоборот. Я провел небольшое исследование и обнаружил: 

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

Который, я думаю, дает мне только что перемещенный предмет, но я не уверен, как заставить его узнать, какой элемент находится сейчас, и откуда он пришел. Любая помощь будет отличной, спасибо!

Ответы [ 2 ]

4 голосов
/ 19 декабря 2009

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

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

</p> <pre><code> <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>

2 голосов
/ 04 августа 2011

но он уже там, используя 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);)

...