jQueryUI zmieniam kolor tła podczas przeciągania z jednej listy do drugiej - jquery, html, css, jquery-ui

Używam sortowalnego jQueryUI, mam dwie listy:

• dodane DVD
• usunięte DVD

Podczas przeciągania z dodanego do usuniętego chcę, aby kolor tła div .container zmienił się na czerwony.

Następnie podczas przeciągania z usuniętych do dodanych chcę, aby kolor tła div .containerTwo zmienił się na czerwony.

http://jsfiddle.net/w3vvL/

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

Jakieś pomysły? Dzięki

Odpowiedzi:

5 dla odpowiedzi № 1

Możesz użyć otrzymać zdarzenie, na które ma odpowiedzieć, gdy lista otrzyma element:

Zobacz zaktualizowane skrzypce: http://jsfiddle.net/w3vvL/39/

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

Oraz z animacją:

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

Zobacz zaktualizowane skrzypce: http://jsfiddle.net/w3vvL/43/

---

0 dla odpowiedzi nr 2

wypróbuj atrybut „symbol zastępczy”

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

---

0 dla odpowiedzi № 3

Jeśli chcesz zrobić więcej jak hover, możesz użyć koniec i na zewnątrz wydarzenia.

Zobacz zaktualizowane skrzypce: 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");
}
});

Możesz zauważyć, że użyłem interfejsu użytkownika.atrybut nadawcy, który jest elementem sortowalnym, z którego element pochodzi, jeśli przechodzi z jednego sortowalnego do drugiego. Pozwala mi wykryć, czy znajdujemy się na innym sortowaniu, czy nie, aby nie zmieniać koloru tła, jeśli nadal znajdujemy się w tym samym sortowaniu.

---