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

Drag and drop script works only once but stops working [No jQuery]

本文关键字：停止工作 没有 jQuery 一次 脚本 工作 拖放      更新时间：2023-09-26

当我遇到错误时，我正在制作自己的灵活的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>

第一次没有打嗝，但所有的过程中，偏移量不够接近鼠标，几乎无法无缝地工作。我如何使脚本工作，就像它的第一次，每次?(它在代码片段中没有显示太多)

我添加了考虑当前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;
	}
}
<div id="1" onmousedown="drag1(1, 1);" onmouseup="drag1(1, 0);" style="background-color: yellow; width: 500px; height: 300px; position: fixed;"></div>

相关文章：