JQuery UI drag and drop with absolute position and bottom property

Question

I am using jQuery UI to create a draggable <div> . <div> absolutely positioned in the lower right or upper left corner using 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 looks like this:

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

JavaScript $('.dragbox').draggable(); allows you to make <div> elements draggable. The top left <div> works as expected, but the bottom right <div> resizes when you drag it. If I change the min-height poperty .dragbox to height , I will see the expected behavior for both fields, but for this I need to use min-height because I don’t know the length of the inner content.

How to position the <div> in the lower right corner and allow drag and drop without resizing the <div> when dragging? Elements of the upper and lower right <div> should behave identically.

DEMO (I use Chrome 27 and Safari 6)

Answer 1

jQuery drags jobs by manipulating the css top and left values. If the field is set to top and bottom (and there is no static height), the field will stretch to fit both properties. This is what causes resizing.

A workaround may be to set the static height in the field, or if this is not an option, set the lower value to "auto" when creating a dragged object and at the same time select the current "upper" position to make sure that the element remains in place.

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

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

Answer 2

@xec gave me the basic idea, and I changed it that way, and it worked for me;

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

Answer 3

for me, worked this way (for my bottom, left absolute div position):

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