How to set start position of draggable div?

Question

I have a draggable div that works fine as long as I don't alter its position via top, right, … CSS. My goal is to set the pre-drag position of the div toward the top-right of its window, which I accomplish with top = 0, right = 0 ; problem is, the div sticks to that position and stretches when dragging.

 dragElement(document.getElementById("myModal")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} else {elmnt.onmousedown = dragMouseDown;} function dragMouseDown(w) { w = w || window.event; w.preventDefault(); pos3 = w.clientX; pos4 = w.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag;} function elementDrag(w) { w = w || window.event; w.preventDefault(); pos1 = pos3 - w.clientX; pos2 = pos4 - w.clientY; pos3 = w.clientX; pos4 = w.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";} function closeDragElement() { document.onmouseup = null; document.onmousemove = null;}}

 #myModal { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; top: 0; right: 0;} #myModalheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff;}

 <div id="myModal"> <div id="myModalheader">Click here to move</div> <p>Move</p><p>this</p><p>DIV</p> </div>

Any workarounds? Help is appreciated.

Answer 1

Give the element a width and height and you should be good.

 dragElement(document.getElementById("myModal")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} else {elmnt.onmousedown = dragMouseDown;} function dragMouseDown(w) { w = w || window.event; w.preventDefault(); pos3 = w.clientX; pos4 = w.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag;} function elementDrag(w) { w = w || window.event; w.preventDefault(); pos1 = pos3 - w.clientX; pos2 = pos4 - w.clientY; pos3 = w.clientX; pos4 = w.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";} function closeDragElement() { document.onmouseup = null; document.onmousemove = null;}}

 #myModal { position: absolute; z-index: 9; height: 200px; width: 200px; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; top: 0; right: 0;} #myModalheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff;}

 <div id="myModal"> <div id="myModalheader">Click here to move</div> <p>Move</p><p>this</p><p>DIV</p> </div>

Answer 2

You can also use flex box to put the container to the right instead.

#parentContainer{
    display: flex; justify-content: flex-end
}

Answer 3

I have two more options for doing this:

1. Do not use right:0; at all and use left:100%; width:max-content; left:100%; width:max-content; followed by transform: translateX(-100%); so it offsets based on the child and not the parent: (Changes were only made to the css file)

 dragElement(document.getElementById("myModal")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} else {elmnt.onmousedown = dragMouseDown;} function dragMouseDown(w) { w = w || window.event; w.preventDefault(); pos3 = w.clientX; pos4 = w.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag;} function elementDrag(w) { w = w || window.event; w.preventDefault(); pos1 = pos3 - w.clientX; pos2 = pos4 - w.clientY; pos3 = w.clientX; pos4 = w.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";} function closeDragElement() { document.onmouseup = null; document.onmousemove = null;}}

 #myModal { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; top: 0; left: 100%; /**Important*/ transform: translateX(-100%); /**Important: offsets based on the element's width and not its parent*/ width:max-content; /**Important: prevents element from shrinking*/ top:0; } #myModalheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; }

 <div id="myModal"> <div id="myModalheader">Click here to move</div> <p>Move</p><p>this</p><p>DIV</p> </div>

2. The second option is to calculate the offset to the right of the element during the first drag and setting right:0; to right:auto; after done dragging (changes only made to the javascript file)

 dragElement(document.getElementById("myModal")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} else {elmnt.onmousedown = dragMouseDown;} function dragMouseDown(w) { w = w || window.event; w.preventDefault(); pos3 = w.clientX; pos4 = w.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag;} function elementDrag(w) { w = w || window.event; w.preventDefault(); pos1 = pos3 - w.clientX; pos2 = pos4 - w.clientY; pos3 = w.clientX; pos4 = w.clientY; //Check if a right offset exists (will only be true //during the first time you drag it) if(elmnt.style.right != null && elmnt.style.right != "auto"){ //calculate right offset var offsetright = window.innerWidth-elmnt.offsetLeft-elmnt.offsetWidth; //add the offset to the right of the element elmnt.style.right = (offsetright +pos1) + "px"; } //end of change elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";} function closeDragElement() { document.onmouseup = null; document.onmousemove = null; elmnt.style.right = "auto"; }}

 #myModal { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; top: 0; right: 0;} #myModalheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff;}

 <div id="myModal"> <div id="myModalheader">Click here to move</div> <p>Move</p><p>this</p><p>DIV</p> </div>