Question

当我遇到错误时，我正在制作自己的灵活的JavaScript DnD脚本。 div第一次移动完全正常，但剩下的时间，它会使偏移变得混乱。我知道每个人都可能会说些什么; ＆＃34;为什么不使用图书馆？＆＃34; 。原因是拥有我自己设计的个人脚本更容易编辑和理解。可能有一种更有效的方法，但这里是代码：

＆＃13;

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;
	}
}

＆＃13;

<div id="1" onmousedown="drag1(1, 1);" onmouseup="drag1(1, 0);" style="background-color: yellow; width: 500px; height: 300px; position: fixed;"></div>

＆＃13;

第一次没有打嗝，但是所有进行的时间，偏移量都不足以使鼠标几乎无缝地运行。如何让脚本每次都像第一次一样工作？（它在代码片段中没有显示出来。）

Answer 1

我添加了考虑当前div坐标。它看起来更稳定：

＆＃13;

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;

拖放脚本只能工作一次但停止工作[没有jQuery]

1 个答案: