jquery - 从一个列表拖动到另一个列表时，jQueryUI 更改背景颜色

Question

我正在使用可排序的 jQueryUI，我有两个列表：

• 添加了 DVD
• 删除了 DVD

当从添加拖动到删除时，我希望 div .container 背景颜色变为红色。

然后，当从删除拖动到添加时，我希望 div .containerTwo 背景颜色变为红色。

http://jsfiddle.net/w3vvL/

$("#gallery").sortable({
    connectWith: "#trash"
});
$("#trash").sortable({
   connectWith: "#gallery"
});

有任何想法吗？谢谢

Answer 1

您可以使用接收事件来响应列表何时收到项目：

查看更新的小提琴：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/

Answer 2

尝试属性“占位符”

$("#gallery").sortable({
    connectWith: "#trash",
    placeholder: "ui-state-highlight"
});

Answer 3

如果你想做更多像悬停一样的事情，你可以使用over and 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 属性，如果从一个可排序对象移动到另一个可排序对象，该属性是该项目来自的可排序对象。它允许我检测我们是否在不同的可排序对象上，以便在我们仍然在同一个可排序对象中时不更改背景颜色。