là có một cách để làm cho divs không chồng lên nhau trong khi kéo qua jquery draggable [hoặc etc ..]?

Question

là có cách nào để làm cho các div không chồng chéo nhau trong khi kéo qua jquery draggable()?

tôi có một loạt các div mà người dùng có thể kéo xung quanh nhưng tôi không thể để chúng chồng lên nhau.

về cơ bản tôi đang tạo canvas nơi người dùng có thể tự do di chuyển nội dung của trang web xung quanh trang web nhưng không cần chồng lấp nội dung khác trong khi di chuyển chúng. bất kỳ ý tưởng?

Answer 1

Bạn cần nhập mã jquery cho hiệu ứng ui có thể kéo. Phải có một dòng trong mã mà chỉ mục z của phần tử được thay đổi thành một số rất cao để nó xuất hiện trên tất cả các phần tử khác. Bạn có thể loại bỏ dòng này và nó nên làm cho nó để các yếu tố không thay đổi lớp dọc của họ khi kéo.

Tôi sẽ chạy tìm "z-index" trong tệp ui.

Answer 2

lý do tại sao không sử dụng .css('z-index') hoặc zIndex không chắc chắn. mà xử lý các over lapping. - đưa ra giá trị của các thành phần cần phải ở dưới cùng nhỏ hơn ví dụ: 1 - cung cấp giá trị của các thành phần cần phải ở số lớn nhất trên cùng, ví dụ: 3 - nếu bạn cần phần tử được kéo vào giữa sau đó cung cấp cho nó một giá trị 2.

hoặc u có thể sử dụng nó trên css như là một lớp mà z-index kiểm soát trùng lặp giữa các

Answer 3

tôi chưa bao giờ sử dụng plugin này bản thân mình, nhưng có vẻ như nó có thể là câu trả lời của bạn: Collidable Draggables.

Answer 4

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 chéo bất kỳ ".obstacle" nào trong khi kéo.

Answer 5

tôi sẽ khuyên bạn sử dụng tùy chọn ZIndex draggble

$(".selector").draggable({ zIndex: 100 }); 

http://api.jqueryui.com/draggable/#option-zIndex