jQueryUI change background colour when dragging from one list to another

Question

I am using jQueryUI sortable, I have two lists:

• added dvds
• removed dvds

When dragging from added to removed I want the div .container background colour to change to red.

Then when dragging from removed to added I want the div .containerTwo background colour to change to red.

http://jsfiddle.net/w3vvL/

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

Any ideas? Thanks

Answer 1

You can use the receive event to respond to when the list receives an item:

See the updated fiddle: http://jsfiddle.net/w3vvL/39/

$("#gallery").sortable({
    connectWith: "#trash",
    receive: function(event, ui) {
                    $(".container").css("background-color", "red");
            }
});

And with animation:

$("#gallery").sortable({
    connectWith: "#trash",
    receive: function(event, ui) {
                    $(".container").css("background-color", "green");
                    $(".container").stop().animate({ backgroundColor: "white" }, "slow");
            }
});

See updated fiddle: http://jsfiddle.net/w3vvL/43/