拖放腳本只能運行一次，但會停止運行[No jQuery]

Question

遇到錯誤時，我正在制作自己的靈活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 = ex y = ey 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> 

第一次沒有打h，但是在所有處理過程中，偏移距離鼠標都不夠近，幾乎無法無縫運行。 如何使腳本每次都像第一次一樣工作？ （在代碼段中顯示的不多。）

Answer 1

我添加了考慮當前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 = ex y = ey 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>