Jessica Jessica - 1 month ago 9
Javascript Question

Center a fixed draggable div

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

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/