为什么拖拽会复位？？

Question

<div id="box1"></div>

#box1{
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
}

var box1=document.getElementById('box1');
var disX= 0;
var disY= 0;
var btn=false;
box1.onmousedown= function (e) {
    disX= e.clientX;
    disY= e.clientY;
    btn=true;
}

document.onmousemove= function (e) {
   if(!btn){return;}
    var left= e.clientX-disX;
    var top= e.clientY-disY;
    box1.style.left=left+'px';
    box1.style.top=top+'px';
}
document.onmouseup= function () {
    btn=false;
}

我写的一个拖拽功能，为什么第二次点的时候会复位？

Answer 1

当单击时记录鼠标的初始位置。
当移动时，如果在拖拽就更新元素的left与top值。

逻辑是有问题的，正在拖拽的时候left与top的值为什么要减去初始值？
这在元素第一次被拖拽时是没有问题的，因为初始的left和top都是0。
可如果之后再拖拽的话，left与top又会回到0，因为你总是让当前鼠标的x与y坐标减去开始拖拽时候的x与y坐标。
在页面上，自然就是总会回到原处。

修改也很简单，你只要不减去初始的值就行了。

Answer 2

你在第一次触发 onmouseup 的时候将 onmouseup 和 onmousemove 事件都已经
觉得应该是这个原因吧

---

document.onmousemove= function (e) {
   if(!btn){return;}
    var left= e.clientX;
    var top= e.clientY;
    box1.style.left=left+'px';
    box1.style.top=top+'px';
}

Answer 3

    <div id="box1"></div>
    #box1{
        width: 20px;
        height: 20px;
        background: red;
        position: absolute;
    }
    
    var box1=document.getElementById('box1');
    var disX= 0;
    var disY= 0;
    var btn=false;
    box1.onmousedown= function (e) {
        disX= e.clientX;
        disY= e.clientY;
        btn=true;
    }
    
    document.onmousemove= function (e) {
       if(!btn){return;}
        var left= e.clientX;
        var top= e.clientY
        box1.style.left=left+'px';
        box1.style.top=top+'px';
    }
    document.onmouseup= function () {
        btn=false;
    }