jQueryUI thay đổi màu nền khi kéo từ một danh sách khác

Question

Tôi đang sử dụng jQueryUI sắp xếp được, tôi có hai danh sách:

• dvd thêm
• dvd loại bỏ

Khi kéo từ thêm vào loại bỏ Tôi muốn màu nền div .container thay đổi thành màu đỏ.

Sau đó, khi kéo từ bị xóa để thêm, tôi muốn div .containerThay đổi màu nền để đổi sang màu đỏ.

http://jsfiddle.net/w3vvL/

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

Bất kỳ ý tưởng? Cảm ơn

Answer 1

Bạn có thể sử dụng các sự kiện receive để đáp ứng khi danh sách nhận được item:

Xem fiddle Cập nhật: http://jsfiddle.net/w3vvL/39/

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

Và với hoạt ảnh:

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

Xem cập nhật fiddle: http://jsfiddle.net/w3vvL/43/

Answer 2

thử thuộc tính "giữ chỗ"

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

Answer 3

Nếu bạn muốn làm nhiều hơn như một di chuột, bạn có thể sử dụng over và out sự kiện.

Xem fiddle Cập nhật: 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"); 
    } 
}); 

Bạn có thể nhận thấy rằng tôi sử dụng thuộc tính ui.sender đó là sắp xếp được rằng mục đến từ nếu di chuyển từ một sắp xếp được sang người khác. Nó cho phép tôi phát hiện xem chúng ta có thể sắp xếp khác nhau hay không để không thay đổi màu nền nếu chúng ta vẫn trong cùng một loại có thể sắp xếp.