今天，我们将解决最后一个拖放原型中的一些问题。让我们看看有什么问题。

附上上一期的Javascript代码，方便大家查看问题。

脚本类型=' 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 . clientx-odiv . offsetleft；disY=oevent . clienty-odiv . offsettop；odiv . onmousemove=function(ev){ var oEvent=ev | | event；odiv . style . left=oevent . client x-DIsX ' px '；odiv . style . top=oevent . clienty-disY ' px '；};odiv . onmouseup=function(){ odiv . onmousemove=null；oDiv.onmouseup=null};};};/script1。现在这个拖拽如果我的鼠标移动的快一点，。

你会发现鼠标从div中出来，此时div不会跟随鼠标。

那为什么会出现这个问题呢？

其实原因很简单。我们在div中添加了mousemove事件，所以一旦鼠标从这个div中分离出来，此时就不会触发mousemove了。

解决方案：事件被加载到文档中，因为您的鼠标仍然在页面中，所以它会触发mousemove快速移动。

然后我们相应地修改代码。

脚本类型=' 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 . clientx-odiv . offsetleft；disY=oevent . clienty-odiv . offsettop；//事件加载文档。onmousemove=function(ev){ var oevent=ev | | event；odiv . style . left=oevent . client x-DIsX ' px '；odiv . style . top=oevent . clienty-disY ' px '；};odiv . onmouseup=function(){ document . onmousemove=null；oDiv.onmouseup=null};};};/script那么这个问题就可以解决了。

2.让我们看看现在出了什么问题。虽然快速拖动的问题解决了，但是当我把鼠标移动到这个位置的时候。

现在很明显，鼠标不在div上。如果你在这个时候举起鼠标，你可以看到它回来时仍然会移动。

这又是一个bug！

其实这个问题和上面一样。所以解决起来很简单。让我们将鼠标添加到文档中。让我们试一试。

document . onmouseup=function(){ document . onmousemove=null；document.onmouseup=null};现在，如果你移动到以前的位置，你就不会有以前的bug，你可以快速移动，没有任何问题。一切正常。

3.让我们看看浏览器的兼容性。

其实火狐浏览器的低版本就有这样的问题。怎么发生的？当你第一次拖的时候，你是对的。当你拖动它一次时，你按住它并移动它。你会发现这个影子就在你身后。这是怎么回事？

实际上，我们现在拖动的是一个空div。火狐有bug。如果我们给div添加一些内容呢？

你会发现现在没有问题。

因此，火狐bug只出现在空div中。

解决方案：

其实很简单。我们只需要阻止浏览器默认事件。在翁木塞敦。为什么要添加到onmousedown？

您可以考虑拖放是从哪个事件开始的。它从一个小镇开始。当鼠标被按下时，拖放开始。因此，应该将其加载到onmousedown中。

其实是加了一个返回假；并且屏蔽了火狐的bug。

不管拖多久都不会有问题。

附加代码：

脚本类型=' text/JavaScript '窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；var DIsX=0；var DIsy=0；奥迪夫。onmousedown=function(ev){ var oEvent=ev | | event；disX=oevent。clientx-odiv。offsetleftdisY=oevent。客户-奥迪夫。偏移；//事件加载文件上文件。onmousemove=function(ev){ var oEvent=ev | | event；奥迪夫。风格。left=oevent。客户端x-DIsX ' px '；奥迪夫。风格。top=oevent。client y-DIsy ' px '；};文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null }；返回false }；};/script现在程序是完整了，但是在用户体验上还有一些问题。

比如说用户可能会把这个差异拖出浏览器外面，那怎么解决呢？

那我们就在加个判断呗。这个很简单吧，如果从左边出去了

,那就直接等于0,他就从左边出不去了。那么上边也是一样的。

那么怎么防止不能从右边出去？画个图就清楚了。其实我们只要把页面的可视取的宽度减掉差异的宽度就能算出来了。

那这个就是所谓的最大值，判断一下如果移动的距离超过了这个最大值就等于这个最大值即可。那么下边是一样的。

附上完整代码：

脚本类型='text/javascript' //拖拽空差异低版本的火狐有bug窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；var DIsX=0；var DIsy=0；奥迪夫。onmousedown=function(ev){ var oEvent=ev | | event；disX=oevent。clientx-odiv。offsetleftdisY=oevent。客户-奥迪夫。偏移；文件。onmousemove=function(ev){ var oEvent=ev | | event；//存储差异当前的位置var oDivLeft=oevent。客户端x-DIsX；var ODI vtop=oevent。client y-DIsy；//从左边拖出去了if(oDivLeft 0){ oDivLeft=0；} else if(odifleft文档。文档元素。客户端宽度-odiv。offsetwithts){ odifleft=document。文档元素。客户端宽度-odiv。偏移；}如果(奥迪vTop(0){ 0奥迪vtop=0；} else if(ODI vtop文档。文档元素。客户身高-odiv。offset theight){ ODI vtop=document。文档元素。客户身高-odiv。偏右；} OdiV。风格。left=OdiVleft ' px奥迪夫。风格。top=ODI vtop ' px};文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null }；返回false//阻止默认事件，解决火狐的bug }；};/script那么现在这个拖拽就比较完整啦O(_)O