更改拖放類時的類名，反之亦然 - jqueryUI

Question

我正在使用jqueryUI將列表項從一個列表拖放到另一個可排序列表。無論如何，當它從所有colls-list放入可排序列表coll-selected-list中時，我可以將已刪除項目的類從「sortedli」更改爲「droppedli」，反之亦然？目前，當我放棄它時，它保留了原來的類名。

$(function() { 
    var lists = [{"listid":"#all-colls-list", "connectid":"#coll-selected-list", "drop":true}, 
    {"listid":"#coll-selected-list", "connectid":"#all-colls-list", "drop":true}]; 

    $.each(lists, function(i, list) { 
     $(list.listid).sortable({ 
      connectWith: list.connectid, 
      dropOnEmpty: list.drop 
     }); 
    }); 
}); 

<ul id="all-colls-list" class="droptrue ui-sortable"> 
       <li class="sortedli">ahsbah</li> 
       <li class="sortedli">bachs</li> 
       <li class="sortedli">stah</li> 
</ul> 


<ul id="coll-selected-list" class="droptrue ui-sortable"> 
       <li class="sortedli" style="">blah</li> 
       <li class="sortedli" style="">blah</li> 
       <li class="sortedli" style="">blah</li> 
</ul> 

Answer 1

這裏是上拖動時改變類完整的解決方案和使用jQuery UI發生跌落事件。

HTML：

<ul id="all-colls-list" class="droptrue ui-sortable"> 
    <li class="sortedli"> 
     ahsbah 
    </li> 
    <li class="sortedli"> 
     bachs 
    </li> 
    <li class="sortedli"> 
     stah 
    </li> 
</ul> 

<ul id="coll-selected-list" class="droptrue ui-sortable"> 
    <li class="sortedli" style=""> 
     blah 
    </li> 
    <li class="sortedli" style=""> 
     blah 
    </li> 
    <li class="sortedli" style=""> 
     blah 
    </li> 
</ul> 

CSS：

#all-colls-list{ 
    display:inline-block; 
    width:200px; 
    border:1px solid #331299; 
    background-color:#1177a8; 
    height:auto; 
} 

#coll-selected-list{ 
    display:inline-block; 
    width:200px; 
    border:1px solid #331299; 
    background-color:#a14466; 
    height:auto; 
} 
#all-colls-list li, #coll-selected-list li{ 
    list-style:none; 
} 
#all-colls-list li:hover, #coll-selected-list li:hover{ 
    cursor:move; 
    border:2px solid #A1B177; 
} 

.dropped{ 
    background-color:#2277a7; 
} 
.sorted{ 
    background-color:#a74455; 
} 

JQuery的：

var lists = [{ 
       "listid": "#all-colls-list", 
       "connectid": "#coll-selected-list" 
      }, { 
       "listid": "#coll-selected-list", 
       "connectid": "#all-colls-list" 
      }]; 
    //Apply Sort on each list 
    $.each(lists, function(i, list) { 
      $(list.listid).sortable({ 
      connectWith: list.connectid, 
      opacity: 0.7, 
      start: function(event, ui) { 
       if ($(ui.item).parents('#all-colls-list').length > 0) { 
         $(ui.item).addClass('dropped'); 
       } else { 
         $(ui.item).addClass('sorted'); 
       } 
      }, 
      stop: function(event, ui) { 
       if ($(ui.item).parents('#all-colls-list').length > 0) { 
        $(ui.item).switchClass('droppedli', 'sortedli'); 
       } else { 
        $(ui.item).switchClass('sortedli', 'droppedli'); 
       } 
       $(ui.item).removeClass('sorted'); 
       $(ui.item).removeClass('dropped'); 
      } 
     }); 

}); 

注：請注意，上面的腳本運行之前，我們已經爲包括全部或分鐘版本最新的jquery.js和最新的jQuery UI java腳本文件。

我已經創建了該解決方案的箱上http://codebins.com/codes/home/4ldqpc3

Answer 2

stop: function(event, ui) { 
    if ($(ui.item).parents('#all-colls-list').length > 0) { 
     $(ui.item).removeClass('droppedli').addClass('sortedli'); 
    } else { 
     $(ui.item).removeClass('sortedli').addClass('droppedli'); 
    } 
} 

示例 - http://jsfiddle.net/s6XTu/9/