我使用jQueryUI可排序,我有两个列表:
当从添加到拖动拖动时,我希望div .container背景颜色变为红色。
然后当从删除拖动到添加时,我希望div .containerTwo背景颜色变为红色。
$("#gallery").sortable({
connectWith: "#trash"
});
$("#trash").sortable({
connectWith: "#gallery"
});
有什么想法吗?感谢
答案 0 :(得分:5)
您可以使用receive事件来响应列表收到项目的时间:
请参阅更新的小提琴:http://jsfiddle.net/w3vvL/39/
$("#gallery").sortable({
connectWith: "#trash",
receive: function(event, ui) {
$(".container").css("background-color", "red");
}
});
动画:
$("#gallery").sortable({
connectWith: "#trash",
receive: function(event, ui) {
$(".container").css("background-color", "green");
$(".container").stop().animate({ backgroundColor: "white" }, "slow");
}
});
请参阅更新的小提琴:http://jsfiddle.net/w3vvL/43/
答案 1 :(得分:0)
尝试属性“占位符”
$("#gallery").sortable({
connectWith: "#trash",
placeholder: "ui-state-highlight"
});
答案 2 :(得分:0)
如果你想做更多像悬停一样的事情,你可以使用over和out事件。
请参阅更新的小提琴:http://jsfiddle.net/w3vvL/61/
$("#gallery").sortable({
connectWith: "#trash",
over: function(event, ui) {
if(ui.sender.context.id != "gallery")
$(".container").css("background-color", "green");
},
out: function(event, ui) {
$(".container").css("background-color", "white");
}
});
您可以注意到我使用了ui.sender属性,该属性是从一个可排序项移动到另一个可排序项时项的来源。它允许我检测我们是否处于不同的可排序状态,以便在我们仍然处于相同的可排序状态时不改变背景颜色。