Center a fixed draggable div

Question

I have a fixed div which I am trying to center vertically and horizontally. Yes, I know there are many question and tutorials to perform this. I checked and followed the instructions. Here's one that I implemented:

#draggable {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Now, I also want the div to be draggable. So it should start off at the center of the screen, then the user will have an option to drag it.

The problem is, when you start dragging it, the div suddenly moves higher. How can I center a fixed, draggable div ?

JSFiddle

 $('#draggable').draggable(); 

 body { width: 2000px; height: 2000px; background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg"); } #draggable { background-color: red; color: lightblue; width: 200px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"> <div id="draggable">Drag Me!</div> 

Edit I updated the examples. draggable doesn't have a set height.

Answer 1

You could use draggable start method to modify css.

$('#draggable').draggable({ start: function() {

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});

} });

http://jsfiddle.net/y2ehtjsu/4/

This gets current position calculated by browser and converts it into normal pixel value, on draggable start. If you are using draggable I sugggest you to familiarize yourself with this: http://api.jqueryui.com/draggable/

Answer 2

Improving on Maciej Krawczyk's answer.

You could put transform in a separate class (call it centered ) and remove the class when user starts to drag. After all, usually the purpose of dragging something is to permanently change its position. This means you need the centering transform to work only once (when the div is first shown). You most probably do not need it to work neither when user drags the div nor at any later stage.

http://jsfiddle.net/y2ehtjsu/8/

Answer 3

The problem is that the draggable code doesn't seem to properly handle translated element positions. The easy way to fix that is to just remove the translate and start your position at 40%/40% which will center it since the width/height is 20%.

 $('#draggable').draggable(); 

 body { width: 2000px; height: 2000px; background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg"); } #draggable { background-color: red; color: lightblue; height: 20%; width: 20%; position: fixed; top: 40%; left: 40%; } 

 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"> <div id="draggable">Drag Me!</div>