我正在使用jqueryUI将列表项从一个列表拖放到另一个可排序列表。无论如何,当它从所有 colls 列表拖放到可排序列表 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>
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/
这是在使用 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