ドラッグアンドドロップスクリプトは一度だけ動作しますが、動作を停止します[いいえ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 = e.x 
 
    y = e.y 
 
    if(cl1 === true){ 
 
    document.getElementById(divid).style.top= y-offs1+"px"; 
 
\t document.getElementById(divid).style.left= x-offs2+"px"; 
 
\t } 
 
} 
 
var drag1 = function(i, cas) { 
 
\t divid= i 
 
\t if(time1=== true){ 
 
\t \t cl1= true 
 
\t \t time1= false 
 
\t }else{ 
 
\t \t cl1= false 
 
\t \t time1= true 
 
\t } 
 
\t switch(cas){ 
 
\t \t case 0: 
 
\t \t \t offs1 = 0; 
 
\t \t \t offs2 = 0; 
 
\t \t break; 
 
\t \t case 1: 
 
\t \t \t offs1 = y; 
 
\t \t \t offs2 = x; 
 
\t \t break; 
 
\t } 
 
}

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

初めてそこにはしゃっくりはありませんが、すべての進行時間、オフセットが十分に近接していませんほぼシームレスに機能するようにマウスに指示します。どのようにスクリプトを毎回初めて実行するようにするには？ （スニペットにはそれほど表示されません）

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 = e.x 
 
    y = e.y 
 
    if(cl1 === true){ 
 
\t \t document.getElementById(divid).style.top = _top + (y-offs1) + 'px'; 
 
\t \t document.getElementById(divid).style.left = _left + (x-offs2) + 'px'; 
 
\t } 
 
} 
 
var drag1 = function(i, cas) { 
 
\t divid= i 
 
\t 
 
\t switch(cas){ 
 
\t \t case 0: 
 
\t \t \t offs1 = 0; 
 
\t \t \t offs2 = 0; 
 
\t \t \t cl1= false; 
 
\t \t break; 
 
\t \t case 1: 
 
\t \t \t var rect = document.getElementById(divid).getBoundingClientRect(); 
 
\t \t \t _left = rect.left; 
 
\t \t \t _top = rect.top; 
 
\t \t \t 
 
\t \t \t offs1 = y; 
 
\t \t \t offs2 = x; 
 
\t \t \t cl1= true; 
 
\t \t break; 
 
\t } 
 
}

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