Vui lòng đề xuất một plugin JQuery xử lý phát hiện va chạm cho các yếu tố có thể kéo

Question

Chúng tôi đang sử dụng plugin giao diện người dùng JQuery Draggable và cần phải không cho phép chồng chéo giữa các phần tử của chúng tôi. Chúng tôi có thể viết một số phát hiện va chạm chính mình nhưng muốn sử dụng một gói thử nghiệm. Bất kỳ đề xuất?

Answer 1

Google nói với tôi rằng gameQuery, một plugin JQuery, có một "va chạm" chức năng:

http://gamequery.onaluf.org/#manual

Tìm kiếm với từ khóa "va chạm" trên trang ở trên.

tìm kiếm google này có thể cung cấp cho bạn một vài tùy chọn khác:

http://www.google.com/search?q=jquery+collision+detection

Answer 2

tìm kiếm nhanh các plugin jQuery lần lượt lên:

Collidable Draggables

Hình như nó vẫn còn sớm, nhưng có thể đáng để kiểm tra.

Answer 3

Giả sử, nhưng tôi nghĩ rằng những gì bạn sẽ cần có thể được tìm thấy ở đây:

$.event.special.drop

Nó sử dụng jQuery nổi tiếng $ .event.special.drag để tạo sự kiện thả de. Bạn có thể đặt mã javascript của riêng mình theo .bind("drop", function(event){ phần tử này bên trong hàm này đại diện cho đối tượng có lớp "thả" mà bạn đã xác định và event.dragTarget là đối tượng đang được kéo.

Tài liệu khác tại trang web được liên kết ở trên. Đây là những gì tôi cần.

Answer 4

Tôi biết câu hỏi này khá cũ, nhưng có thể bạn sẽ thấy điều này hữu ích: Collision Check Plugin for jQuery.

Mô tả bằng tiếng Đức, nhưng phải tự giải thích. Bạn có thể sử dụng hai phần tử đơn lẻ hoặc thậm chí tập hợp các phần tử và sẽ lấy lại một tập hợp tất cả các phần tử va chạm.

Answer 5

Bạn có thể thử jquery-collision cộng jquery-ui-draggable-collision. Tiết lộ đầy đủ: Tôi vừa viết và phát hành chúng trên sourceforge.

Đầu tiên cho phép này:

var hit_list = $("#collider").collision(".obstacle"); 

đó là danh sách tất cả ".obstacle" trùng "#collider".

Thứ hai phép:

$("#collider").draggable({ obstacle: ".obstacle" }); 

nào mang đến cho bạn (trong số những thứ khác), một "va chạm" sự kiện để ràng buộc vào:

$("#collider").bind("collision", function(event,ui){...}); 

Và thậm chí bạn có thể thiết lập:

$("#collider").draggable({ obstacle: ".obstacle", preventCollision: true }); 

để ngăn chặn "#collider" không bao giờ chồng lên bất kỳ ".obstacle" nào trong khi kéo.