为什么拖拽会复位？？

Question

#box1{width:20px;height:20px;background:red;position:absolute;}varbox1=document.getElementById('box1');vardisX=0;vardisY=0;varbtn=false;box1.onmousedown=function(e){disX=e.clientX;disY=e.clientY;btn=true;}document.onmousemove=function(e){if(!btn){return;}varleft=e.clientX-disX;vartop=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坐标。在页面上，自然就是总会回到原处。
修改也很简单，你只要不减去初始的值就行了。