当我遇到错误时,我正在制作自己的灵活的JavaScript DnD脚本。 div第一次移动完全正常,但剩下的时间,它会使偏移变得混乱。我知道每个人都可能会说些什么; "为什么不使用图书馆?" 。原因是拥有我自己设计的个人脚本更容易编辑和理解。可能有一种更有效的方法,但这里是代码:
document.onmousemove = mouseCoords;
var x = 0;
var y = 0;
var cl1= false;
var time1= true;
var divid;
var offs1;
var offs2;
function mouseCoords(e) {
x = e.x
y = e.y
if(cl1 === true){
document.getElementById(divid).style.top= y-offs1+"px";
document.getElementById(divid).style.left= x-offs2+"px";
}
}
var drag1 = function(i, cas) {
divid= i
if(time1=== true){
cl1= true
time1= false
}else{
cl1= false
time1= true
}
switch(cas){
case 0:
offs1 = 0;
offs2 = 0;
break;
case 1:
offs1 = y;
offs2 = x;
break;
}
}

<div id="1" onmousedown="drag1(1, 1);" onmouseup="drag1(1, 0);" style="background-color: yellow; width: 500px; height: 300px; position: fixed;"></div>
&#13;
第一次没有打嗝,但是所有进行的时间,偏移量都不足以使鼠标几乎无缝地运行。如何让脚本每次都像第一次一样工作? (它在代码片段中没有显示出来。)
答案 0 :(得分:0)
我添加了考虑当前div坐标。它看起来更稳定:
document.onmousemove = mouseCoords;
var x = 0;
var y = 0;
var cl1= false;
var divid;
var offs1;
var offs2;
var _top;
var _left;
function mouseCoords(e) {
x = e.x
y = e.y
if(cl1 === true){
document.getElementById(divid).style.top = _top + (y-offs1) + 'px';
document.getElementById(divid).style.left = _left + (x-offs2) + 'px';
}
}
var drag1 = function(i, cas) {
divid= i
switch(cas){
case 0:
offs1 = 0;
offs2 = 0;
cl1= false;
break;
case 1:
var rect = document.getElementById(divid).getBoundingClientRect();
_left = rect.left;
_top = rect.top;
offs1 = y;
offs2 = x;
cl1= true;
break;
}
}
&#13;
<div id="1" onmousedown="drag1(1, 1);" onmouseup="drag1(1, 0);" style="background-color: yellow; width: 500px; height: 300px; position: fixed;"></div>
&#13;