Giao diện người dùng JQuery có thể kéo được: Vượt quá ngăn chặn ở một bên

Question

Tôi đang sử dụng giao diện người dùng JQuery để triển khai các yếu tố có thể thay đổi kích thước/có thể kéo. Bây giờ tôi muốn xác định một ngăn chặn cho các yếu tố này giới hạn việc thay đổi kích thước/kéo trên chính xác ba (!) Bên. Ví dụ. xem cái này JSFiddle example. Bạn có thể thấy rằng phần tử được chứa chỉ có thể được thay đổi kích cỡ/kéo vào bên trong vùng của cha mẹ.

Điều tôi muốn đạt được là phần tử có thể vượt quá ngưỡng dưới cùng và được di chuyển ra ngoài đường viền dưới cùng của phụ huynh. Tuy nhiên việc thay đổi kích thước/kéo vẫn nên được giới hạn ở phía trên, bên phải và bên trái như được quy định bởi các đường viền của cha mẹ.

Vì vậy this modification là những gì tôi đã đưa ra:

// resizable/draggable option 
resize/drag : function(event, ui) { 
    expandParent("#parentElement", "#dragElement"); 
} 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", "+=2"); 
    } 
} 

Nếu bạn chơi xung quanh với biên giới phía dưới bạn nhận thấy rằng khu vực này của cha mẹ được mở rộng nếu đứa trẻ trở nên quá gần với biên giới phía dưới của phụ huynh. Thật không may, điều này dừng lại sau 20 pixel. Sau đó, bạn phải nhả nút chuột và thay đổi kích thước/kéo một lần nữa để mở rộng vùng xa hơn. Bạn có bất kỳ ý tưởng tại sao đó là?

Answer 1

Vâng chức năng expandParent sẽ không hoạt động vì ranh giới vùng chứa đã được đặt bởi giao diện người dùng JQuery và nó sẽ không được cập nhật cho đến khi bạn nhả chuột.

Vì vậy, tôi có thể nghĩ đến hai giải pháp ở đây một là thanh lịch và thứ hai là khó khăn

Rõ ràng là giải pháp thanh lịch sẽ có văn bản phương pháp chứa của riêng bạn đó là miễn phí ở phía dưới. Nhưng bây giờ tôi có một giải pháp khôn lanh bằng cách sử dụng một phần tử cha giả và thiết lập chiều cao của nó thành một giá trị lớn như 1000 hoặc chiều cao của cửa sổ và sau đó thiết lập thuộc tính ẩn tràn cho cha mẹ thực sự.

Đây là giải pháp của tôi:

<div id="parentElement"> 
    <div id="dummy-parent"> 
     <div id="dragElement" class="dragClass"> 
      <p>Drag me around!</p> 
     </div> 
    </div> 
</div> 



function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var parentEl = $(parentName); 
    var dragElHeight=dragEl.height(); 
    if(parentEl.height() <= dragElHeight) { 
     parentEl.height(dragElHeight); 
    } 
} 

Check the JS Fiddle

Bạn phải thay đổi mã dựa trên ứng dụng của bạn tôi chỉ cho bạn ý tưởng

Answer 2

Có vẻ như bên trong giao diện người dùng JQuery, họ giữ thông tin của phụ huynh ở đầu kéo, vì vậy ngay cả khi bạn thay đổi kích thước, nó sẽ vẫn hạn chế kéo.

Để khắc phục điều đó, bạn có thể đặt hộp giới hạn ngăn chặn của riêng mình.

$("#dragElement") 
    .draggable({ 
     cursor  : "move", 
     scroll  : false, 
     containment : [20, 20, 400+20, 1000], 
     drag : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }) 
    .resizable({ 
     containment : "parent", 
     resize : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }); 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", dragElBottom+20); 
    } 
} 

Với mã trên, nó sẽ cho phép thay đổi kích thước của phụ huynh lên tới 1000 + 20 chiều cao. Bạn có thể thử mã trên here (JSFiddle).

Nếu cần thiết để thực hiện vùng chứa động, lúc đầu (và trong phương thức đổi kích thước), hãy đặt vùng chứa mới bằng đúng BoundingBox.

var p = $("#parentElement"); 
var dragWidth = parseInt($("#dragElement").css('width')); 
var left = p[0].offsetLeft; 
var top = p[0].offsetTop; 
var width = parseInt(p.css("width"), 10)-dragWidth; 
var containment = [left, top, width+left, 1000]; 

Yeah, tôi biết giải pháp là loại hackish .. nhưng dù sao, tôi chỉ cập nhật các JSFiddle Giải pháp này có thể không tính toán và tái thiết lập tự động kích thước của container. Chỉ muốn có một JSFiddle làm việc độc đáo.

Answer 3

$("#dragElement") 
     .draggable({ 
      cursor  : "move", 
      containment : '#Container', 
      drag : function(event, ui) { 
       var growAmount = 10; 
       var cont = $('#Container'); 
       var item = $(ui.helper); 

       var itemOffset = item.offset(); 
       itemOffset.bottom = itemOffset.top + dProps.item.height(); 


       var contOffset= cont.offset(); 
       contOffset.bottom = contOffset.top + cont.height(); 

       if(itemOffset.bottom >= contOffset.bottom){ 
        var inst = item.draggable("instance"); 
        inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount]; 
        cont.height(parseInt(cont.height()) + growAmount); 
       } 
      } 
     });