JQuery класс изменения при сортировке

Question

//JavaScript 
 

 
$(function() { 
 
    $("#sortable1, #sortable2").sortable({ 
 
    connectWith: ".connectedSortable" 
 
    }).disableSelection(); 
 
});

/*CSS*/ 
 

 
#sortable1, #sortable2 { 
 
    border: 1px solid #eee; 
 
    width: 142px; 
 
    min-height: 20px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 0 0 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
#sortable1 li, #sortable2 li { 
 
    margin: 0 5px 5px 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 120px; 
 
}

<!--My HTML --> 
 

 
<ul id="sortable1" class="connectedSortable"> 
 
    <li class="ui-state-default">Item 1</li> 
 
    <li class="ui-state-default">Item 2</li> 
 
    <li class="ui-state-default">Item 3</li> 
 
</ul> 
 

 
<ul id="sortable2" class="connectedSortable"> 
 
    <li class="ui-state-highlight">Item 1</li> 
 
    <li class="ui-state-highlight">Item 2</li> 
 
    <li class="ui-state-highlight">Item 3</li> 
 
</ul>

Моим вопрос: Когда li элемента перехода от одного к другим ulul в то время li содержат изменения класса.

exa. возьмите li сперва ul для перемещения второй ul в то время li изменение класса ui-state-default до ui-state-highlight.

вы можете редактировать в Js скрипку http://jsfiddle.net/fo51dggo/

Answer 1

Существует способ остановки в сортировке. изменить класс там

Событие остановки запускается при прекращении сортировки.

Try как этот

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable", 
     start: function (event, ui) { 
      ui.item.data('parentID', ui.item.parent().attr("id")); 
     }, 
     stop: function (event, ui) { 
      var parentID = ui.item.data('parentID'); 
      if (ui.item.hasClass("ui-state-default")) { 
       if (parentID !== ui.item.parent().attr("id")) { 
        ui.item.removeClass("ui-state-default"); 
        ui.item.addClass("ui-state-highlight"); 
       } 
      } else if (ui.item.hasClass("ui-state-highlight")) { 
       if (parentID !== ui.item.parent().attr("id")) { 
        ui.item.removeClass("ui-state-highlight"); 
        ui.item.addClass("ui-state-default"); 
       } 
      } 
      console.log(ui.item.parent().attr("id")); 
     } 
    }).disableSelection(); 
}); 

Fiddle

Answer 2

Используйте функцию drop(event, ui), которая выполняется, когда вы уронили Droppable объект. Вы можете использовать:

ui.item.addClass("ui-state-highlight"); 

Внутри drop(event, ui) функция. Дополнительная информация: Droppable - Event Drop.

Answer 3

Вы можете использовать stop событие для обработки изменений класса,

start: function (event, ui) { 
     $currParent = ui.item.parent(); 
}, 
stop: function (event, ui) { 
    if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class')) 
} 

Fiddle Demo

ui.item - объект jQuery, представляющий текущий перемещенный элемент.

---

Полный код:

$(function() { 
    var $currParent; 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable", 
     start: function (event, ui) { 
      $currParent = ui.item.parent(); 
     }, 
     stop: function (event, ui) { 
      if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class')) 
     } 
    }).disableSelection(); 
}); 

Это изменило бы ui-state-default к ui-state-highlight и наоборот.