Giới hạn các mục có thể kéo của jQuery từ chồng chéo/va chạm với các phần tử anh chị

Question

Tôi cần sử dụng giao diện người dùng jQuery để hạn chế vùng chứa đối tượng có thể kéo với một số hạn chế bổ sung. Tôi cần ngăn phần tử có thể kéo chồng chéo với các phần tử khác trong cùng một vùng chứa. Tôi cần phải cho phép di chuyển trong khu vực "moveInHere" nhưng không cho phép khu vực "butNotHere". Có thể không?

<div id="moveInHere"> 

    <div id="dragMe"> </div> 

    <div id="butNotHere"> </div> 

</div> 


<script type="text/javascript"> 

    $("#dragMe").draggable({ 
     containment: "#moveInHere" 
    }); 

</script> 

Answer 1

Edit: Giải pháp mới

Tôi tìm thấy một plugin cho điều này được gọi là JQuery UI Draggable Collision. Sử dụng điều này, việc thực hiện chức năng mong muốn của bạn trở nên tầm thường. Xem ví dụ jsFiddle sau: http://jsfiddle.net/q3x8w03y/1/ (này sử dụng phiên bản 1.0.2 của JQuery UI Draggable va chạm, cùng với JQuery 1.7.2 và 1.1.18 jQueryUI.)

Đây là mã:

$("#dragMe").draggable({ 
    obstacle: "#butNotHere", 
    preventCollision: true, 
    containment: "#moveInHere" 
}); 

Cũ Solution

sau đây nên làm việc. Nó có một trục trặc, mặc dù. Một khi các div va chạm, bạn phải "hối hận" div bạn đang kéo, điều này có thể gây phiền toái một chút. Có lẽ ai đó sẽ biết cách sửa lỗi này. Bạn có thể thấy jsFiddle ví dụ của tôi here: http://jsfiddle.net/MrAdE/8/

var prevOffset, curOffset; 
$("#dragMe").draggable({ 
    drag: function(e,ui) { 
     prevOffset= curOffset; 
     curOffset= $.extend({},ui.offset); 
     return true; 
    } 
}); 

$("#butNotHere").droppable({ 
    greedy: true, 
    over: function(e,ui) { 
     ui.helper.offset(curOffset= prevOffset).trigger("mouseup"); 
    }, 
    tolerance: "touch" 
});​ 

Answer 2

Điều này đã cho tôi một chút không quan trọng. Về cơ bản tôi đã tạo một droppable trên phần tử bạn muốn tránh, sau đó đặt boolean khi kéo qua nó. Sau đó tôi sử dụng nó trong một hàm backvert không có giấy tờ để hủy bỏ việc hủy bỏ. Nó chỉ hoạt động nếu #dragMe hoàn toàn so với #butNotHere:

$(document).ready(function(){ 
    var shouldCancel = false; 
    $('#dragMe').draggable({ 
     containment: '#moveInHere', 
     revert: function(){ 
      if (shouldCancel) { 
       shouldCancel = false; 
       return true; 
      } else { 
       return false; 
      } 
     } 
    }); 
    $('#butNotHere').droppable({ 
     over: function(){ 
      shouldCancel = true; 
     }, 
     out: function(){ 
      shouldCancel = false; 
     } 
    }); 
}); 

Kiểm tra các bản demo làm việc và cảm thấy tự do để chơi với nó: http://jsfiddle.net/H59Nb/31/