如何設置可拖動div的開始位置？

Question

我有一個可拖動的div ，只要我不通過top, right, … CSS 改變它的位置top, right, …它就可以正常工作。 我的目標是將 div 的預拖動位置設置為其窗口的右上角，我通過top = 0, right = 0 ； 問題是， div粘在該位置並在拖動時拉伸。

 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>

任何解決方法？ 幫助表示贊賞。

Answer 1

給元素一個寬度和高度，你應該很好。

 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

您也可以使用 flex box 將容器放在右側。

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

Answer 3

為此，我還有兩個選擇：

1. 不要使用right:0; 完全使用left:100%; width:max-content; left:100%; width:max-content; 其次是transform: translateX(-100%); 所以它基於子項而不是父項進行偏移：（僅對 css 文件進行了更改）

 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. 第二個選項是計算第一次拖動時元素向右的偏移量，設置為right:0; right:auto; 完成拖動后（僅對 javascript 文件進行更改）

 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>