jQueryUI change background colour when dragging from one list to another

css, html, jquery, jquery-ui

Solution

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/

Problem

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

Original source