Geek asks and answers

JQueryUI changes background color when dragging from one list to another

I am using jQueryUI sortable, I have two lists:

  • added dvds
  • deleted dvds

When dragging from the added to the remote, I want the background color of the div.container to change to red.

Then, when dragging from deleted to added, I want the background color of div.containerTwo to change to red.

http://jsfiddle.net/w3vvL/

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

Any ideas? Thanks

+5
source share
3 answers

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

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

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

And with the animation:

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

See an updated script: http://jsfiddle.net/w3vvL/43/

+5

"placeholder"

$("#gallery").sortable({
    connectWith: "#trash",
    placeholder: "ui-state-highlight"
});
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, , , . , , , .

0

More articles:


All Articles