Giao diện người dùng jQuery có thể kéo được với vị trí tuyệt đối và thuộc tính dưới cùng

Question

Tôi đang sử dụng giao diện người dùng jQuery để tạo một ảnh có thể kéo <div>. Các <div> được hoàn toàn vị trí để phía dưới bên phải hoặc phía trên bên trái sử dụng CSS:

.dragbox { 
    position: absolute; 
    width: 140px; 
    min-height: 140px; /* I need to use min-height */ 
    border: 3px solid black; 
    padding: 10px; 
} 
.bottom { 
    bottom: 5px; /* causes box to resize when dragged */ 
    right: 5px; 
} 
.top { 
    top: 5px; /* does not cause box to resize */ 
    left: 5px; 
} 

HTML trông như thế này:

<div class="dragbox bottom"> 
    Bottom Box :(
</div> 
<div class="dragbox top"> 
    Top Box :) 
</div> 

JavaScript là $('.dragbox').draggable(); để làm cho <div> yếu tố kéo. Phía trên cùng bên trái <div> hoạt động như mong đợi, nhưng dưới cùng bên phải <div> thay đổi kích thước khi được kéo. Nếu tôi thay đổi số trang min-height của .dragbox thành height Tôi thấy hành vi mong đợi cho cả hai hộp, nhưng tôi cần sử dụng min-height vì điều này vì tôi không biết độ dài của nội dung bên trong.

Làm cách nào để định vị <div> ở dưới cùng bên phải và cho phép kéo mà không cần thay đổi kích thước <div> khi kéo? Các phần tử <div> trên cùng bên trái và dưới cùng bên phải sẽ hoạt động theo cùng một cách.

DEMO (tôi sử dụng Chrome 27 và Safari 6) công trình kéo

Answer 1

jQuery bằng cách điều chỉnh css top và left giá trị. Khi một hộp có cả hai giá trị top và bottom được đặt (và không có chiều cao tĩnh), hộp sẽ kéo dài để khớp với cả hai thuộc tính. Đây là những gì gây ra thay đổi kích thước.

Cách giải quyết có thể là đặt chiều cao tĩnh trên hộp hoặc nếu đó không phải là tùy chọn, hãy đặt giá trị dưới cùng thành "tự động" khi có thể kéo và tìm nạp vị trí "trên cùng" hiện tại cùng một lúc để đảm bảo phần tử vẫn được đặt.

$('.dragbox').draggable({ 
    create: function(event, ui) { 
     $(this).css({ 
      top: $(this).position().top, 
      bottom: "auto" 
     }); 
    } 
}); 

http://jsfiddle.net/expqj/8/

Answer 2

@xec đã cho tôi ý tưởng chính và tôi đã thay đổi nó theo cách này và nó làm việc cho tôi;

jQuery("#container").draggable({ 
        start: function (event, ui) { 
         $(this).css({ 
          right: "auto", 
          top: "auto" 
         }); 
        } 
       }); 

Answer 3

đối với tôi, làm việc theo cách này (đối với phía dưới của tôi, trái div tuyệt đối vị trí):

 $("#topBarUpDownDiv").draggable({ axis: "x", 
      stop: function(event, ui) { 
       var elem=$(this)[0]; 
       $(elem).css({ bottom: $(this).position().bottom, top: "auto" }); 
      } 
     });