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>

我的問題： 當從一個ul當時lili元素移動到另一個ul包含類的變化。

exa。從ul第li第ul當時li類更改ui-state-default到ui-state-highlight。

您可以編輯成爵士小提琴 http://jsfiddle.net/fo51dggo/

Answer 1

有一種可停止的排序方法。更改課程

停止事件在排序停止時觸發。

嘗試這樣

​​

Fiddle

Answer 2

使用，當你放下投擲的對象，執行相應的功能drop(event, ui)。您可以使用：

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，反之亦然。