2011-12-25 28 views
6

Tôi có ví dụ này trong jsfiddleLàm cách nào để triển khai phát hiện va chạm giữa một tập hợp các phần tử Div?

Tôi có một var như là các yếu tố va chạm:

var $div = $('.container'); 

và sau đó va chạm:

function test(){ 
    $('.drag') 
     .drag("start",function(ev, dd){ 
      dd.limit = $div.offset(); 
      dd.limit.bottom = dd.limit.top + $div.outerHeight() 
       - $(this).outerHeight(); 
      dd.limit.right = dd.limit.left + $div.outerWidth() 
       - $(this).outerWidth(); 
     }) 
     .drag(function(ev, dd){ 
      $(this).css({ 
       top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY)), 
       left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX)) 
      }); 
     }); 
} 

cho:

<div class="container"></div> 
<div class="drag xxx" style="left:40px;"></div> 
<div class="drag xxx" style="left:120px;"></div> 
<div class="drag xxx" style="left:200px;"></div> 

Mã này triển khai phát hiện xung đột của div con chống lại div container. Làm thế nào tôi sẽ thực hiện phát hiện va chạm để làm cho 3 divs va chạm với nhau?

Tôi đang nghĩ để thiết lập một div khác: var $divs = $('.xxx'); nhưng không chắc chắn cách sử dụng nó trong ví dụ này.

+0

Bằng cách "va chạm với chính mình", bạn có nghĩa là "ngăn chặn quá/underlap?" –

+1

bản sao có thể có của [Vui lòng giới thiệu một plugin JQuery xử lý phát hiện va chạm cho các phần tử có thể kéo] (http://stackoverflow.com/questions/773717/please-recommend-a-jquery-plugin-that-handles-collision-detection-for -draggable) –

+0

w có thể thấy rằng chúng va chạm với thùng chứa '

' tôi cũng muốn va chạm với chúng – Patrioticcow

Trả lời

8

Đầy đủ collision detection và sửa collision response không phải là vấn đề nhỏ nhặt cần giải quyết, ngoại trừ trong trường hợp đặc biệt.

Mã bạn có bây giờ khá dễ viết vì bạn chỉ có hai đối tượng để so sánh (đối tượng kéo và vùng chứa) và vì phản ứng va chạm của bạn chỉ đơn giản là hạn chế vị trí của div nằm trong vùng chứa.

Để tránh va chạm hoàn toàn với tất cả các div, bạn sẽ phải kiểm tra div đã kéo đối với vùng chứa và tất cả các div khác. Phản ứng va chạm của bạn sẽ phải tính toán một vector chuyển động và xử lý logic "trượt" phức tạp để đảm bảo bạn có thể di chuyển xung quanh các đối tượng khác, nhưng đảm bảo rằng vị trí cuối cùng của bạn sẽ vẫn ở bên trong vùng chứa.

Tôi khuyên bạn trước tiên nên xem xét lại nhu cầu phát hiện va chạm đầy đủ của bạn, vì nó có thể hoàn hảo nặng nề và phức tạp. Có thể bạn chỉ cần overlap detection, ala jQuery UI droppable? Hoặc có thể bạn cần một cái gì đó giống như jQuery UI của draggable snapping, hoặc jQuery UI của ?

Nếu bạn xác định bạn thực sự cần phát hiện va chạm đầy đủ, tôi khuyên bạn nên lấy một thư viện đã xử lý việc phát hiện xung đột do khó thực hiện. Xem câu trả lời về câu hỏi này cho một vài lựa chọn thư viện:

Nếu bạn thực sự muốn thực hiện điều đó cho mình, bạn nên tìm kiếm các tách Axis Định lý:

Sau đó tôi đã đọc các bài viết về triển khai phát hiện va chạm và tái Response cho như đã thấy trong the N game:

Nếu bạn cần phải tìm kiếm cho biết thêm, bạn có thể xem xét các div là Axis-Aligned Bounding Boxes (AABB s).Điều này có thể cung cấp cho bạn sự gia tăng tuyệt vời và giảm độ phức tạp rất lớn. Toán để kiểm tra vụ va chạm AABB -to- AABB dễ dàng xảy ra khi phát hiện chồng chéo và va chạm (mặc dù phản ứng va chạm vẫn khó như với bất kỳ loại va chạm nào khác).

Các vấn đề liên quan