拖放时更改类名，反之亦然 – jqueryUI

我正在使用jqueryUI将列表项从一个列表拖放到另一个可排序列表。 无论如何我可以将被删除项目的类从’sortedli’更改为’droppedli’，当它从all-colls-list中删除到可排序列表coll-selected-list时，反之亦然？ 目前，当我删除它时，它保留了原始的类名。

$(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 }); }); }); 
 
ahsbah
 
bachs
 
stah
 
 
 
blah
 
blah
 
blah
  

Answer 1

这是使用jQuery UI进行拖放事件时更改类的完整解决方案。

HTML：

 
 
 ahsbah 
 
 bachs 
 
 stah 
 
 
 
 blah 
 
 blah 
 
 blah 
  

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上创建了一个带有解决方案的bin

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/