我有一个可拖动的 div
,只要我不通过 top, right, …
CSS 改变它的位置,它就可以正常工作。我的目标是将 div 的预拖动位置设置为其窗口的右上角,我使用 top = 0, right = 0
;问题是,div
会固定在那个位置并且 stretches拖动时。
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>
有什么解决方法吗?感谢您的帮助。
最佳答案
给元素一个宽度和高度,你应该很好。
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>
关于javascript - 如何设置可拖动div的起始位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52214243/