jQueryUI muda a cor de fundo ao arrastar de uma lista para outra - jquery, html, css, jquery-ui

Estou usando o jQueryUI classificável, tenho duas listas:

• dvds adicionados
• dvds removidos

Ao arrastar de adicionado para removido, quero que a cor de fundo do div .container mude para vermelho.

Então, ao arrastar de removido para adicionado, quero que a cor de fundo div .containerTwo mude para vermelho.

http://jsfiddle.net/w3vvL/

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

Alguma ideia? obrigado

Respostas:

5 para resposta № 1

Você pode usar o receber evento para responder quando a lista recebe um item:

Veja o violino atualizado: http://jsfiddle.net/w3vvL/39/

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

E com animação:

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

Veja o violino atualizado: http://jsfiddle.net/w3vvL/43/

---

0 para resposta № 2

experimente o atributo "placeholder"

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

---

0 para resposta № 3

Se você quiser fazer mais como um foco, você pode usar o sobre e Fora eventos.

Veja o violino atualizado: 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");
}
});

Você pode notar que usei o ui.Atributo do remetente, que é o classificável de onde o item vem se for movido de um classificável para outro. Isso me permite detectar se estamos em uma classificável diferente ou não, a fim de não alterar a cor de fundo se ainda estivermos na mesma classificável.

---