拖放原理：其实鼠标到左上角的距离保持不变。我们来看看下图，。

这个红点就是鼠标。

其实拖动就是通过鼠标的位置来计算物体的位置，就是这么简单任性。这个距离怎么找？

鼠标位置和物体位置的区别就是距离，对吧？对角线由水平线和垂直线组成。

让我们看看这个程序是如何工作的。

Div id='Div1' /div事实上，他改变的是一个div的左上角，所以他移动了。那个公式里一定有绝对定位，对吧？

style type=' text/CSS ' # div 1 { width : 200 px；高度： 200 px；背景：红色；绝对位置：} /style这里有几个步骤，1。鼠标按下2。鼠标向上3。鼠标移动。

脚本类型=' text/JavaScript ' window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ')；var DIsX=0；var DIsy=0；odiv . onmousedown=function(ev){ var oEvent=ev | | event；//浏览器兼容性disx=oevent . client x-odiv . offset ref；//水平位置为鼠标位置-div位置disy=oevent . clienty-odiv . offset top；};odiv . onmousemove=function(ev){ var oEvent=ev | | event；odiv . style . left=oevent . client x-DIsX ' px '；//当前鼠标位置-disco div . style . top=oevent . clienty-disy ' px '；};};/脚本看图说话：

var oDivLeft=oevent . client x-DIsX；画面清晰吗？

Mouseup，我们现在不要看效果。

你会发现一个非常有趣的现象。如果我不按鼠标，我会跟着我。为什么呢？

我们来看一下mouse move:JavaScript中没有人规定在开始之前必须按下鼠标，对吗？不管你按不按鼠标，这个鼠标移动总是会发生，所以问题就出在这里。在鼠标被按下之前，鼠标在上面移动应该是没有反应的，但是只有按下才能有反应。

因此，这个mousemove不应该一出现就添加，而应该在按下鼠标查看修改后的代码后添加。

顺便加上mouseup，然后体现他的角色。效果为oDiv.onmousemove=null移动事件被移除，

否则，当您的鼠标被抬起时，对象仍会跟随您。oDiv.onmouseup=null没有垃圾，举起鼠标也没用。

看看修改后的代码：

脚本类型=' text/JavaScript ' window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ')；var DIsX=0；var DIsy=0；odiv . onmousedown=function(ev){ var oEvent=ev | | event；//浏览器兼容性disx=oevent . client x-odiv . offset ref；//水平位置为鼠标位置-div位置disy=oevent . clienty-odiv . offset top；odiv . onmousemove=function(ev){ var oEvent=ev | | event；odiv . style . left=oevent . client x-DIsX ' px '；//当前鼠标位置-disco div . style . top=oevent . clienty-disy ' px '；};odiv . onmouseup=function(){ odiv . onmousemove=null；oDiv.onmouseup=null//不丢垃圾，提鼠标也没用}；};};/script现在我们已经完成了一个简单的拖放。当然，还有一些小问题需要解决。

但无论如何，我们已经有了拖拽的雏形。下一期我们会逐一解决一些bug。