今天我们要解决最后一个问题中的一些问题。下面要看的问题是什么

连接到前面的Javaｓｃｒｉｐｔ代码，方便您查看问题。



在window.onload =函数（）{
无功odiv = document.getelementbyid（联赛）；
VaR disx = 0；
VaR Disy = 0；
odiv.onmousedown =功能（EV）{
无功oevent = EV事件| |；
oevent.clientx - odiv.offsetleft disx =；
oevent.clienty - odiv.offsettop Disy =；

odiv.onmousemove =功能（EV）{
无功oevent = EV事件| |；
odiv.style.left = oevent.clientx - disx + 'px；
odiv.style.top = oevent.clienty - Disy + 'px；
}；
odiv.onmouseup =函数（）{
odiv.onmousemove = null；
odiv.onmouseup = null；
}；

}；

}；



1。现在拖动，如果我快速移动，你会发现鼠标从div中出来，此时div不会跟随鼠标。

那么你为什么会有这样的问题呢

原因其实很简单，MouseMove事件添加到div，所以一旦鼠标的div，那么MouseMove是不是在这个时间触发。

解决方案：事件加载的文件，因为你的鼠标仍然是在页无论如何，如何触发MouseMove，所以移动速度快。

因此，我们相应地修改代码。



在window.onload =函数（）{
无功odiv = document.getelementbyid（联赛）；
VaR disx = 0；
VaR Disy = 0；
odiv.onmousedown =功能（EV）{
无功oevent = EV事件| |；
oevent.clientx - odiv.offsetleft disx =；
oevent.clienty - odiv.offsettop Disy =；
加载文档事件
document.onmousemove =功能（EV）{
无功oevent = EV事件| |；
odiv.style.left = oevent.clientx - disx + 'px；
odiv.style.top = oevent.clienty - Disy + 'px；
}；
odiv.onmouseup =函数（）{
document.onmousemove = null；
odiv.onmouseup = null；
}；

}；

}；



那么问题就可以解决了。

2。让我们看看现在发生了什么，虽然快速的问题已经解决了，但是当我移动鼠标到这个位置时



现在你可以清楚地看到，鼠标是不是在学如果你把鼠标在这个时候，你可以看到它后会回来，这是另一个错误的举动！

事实上，问题是，上面的相同，所以很容易解决它，我们添加MouseUp文件。让我们试试看。


document.onmouseup =函数（）{
document.onmousemove = null；
document.onmouseup = null；
}；


所以现在如果你移动到那个位置，它不会在它出现之前出现bug，快速移动没有问题，一切都是正常的。

三.让我们看看浏览器兼容性的问题。

事实上，Firefox浏览器的低版本中存在这样的问题。

这是怎么发生的当你第一次拖动它的时候，按住它一次，你会发现后面会有一个影子。这是怎么回事

事实上，我们现在拖着一个空的div Firefox与bug，所以如果你添加一点内容到div，



你会发现现在没有问题了。

所以Firefox的漏洞仅在空分

解uff1a

In fact, we can just stop the default event of the browser from return false; in onmousedown.Why should we add it to onmousedown

你可以想一想，这事件从鼠标开始，和拖放开始当鼠标被按下。所以你要加载鼠标。

事实上，返回false被添加了；Firefox的bug被屏蔽掉了。

所以不管怎样拖动它都没有问题。

附码：



在window.onload =函数（）{
无功odiv = document.getelementbyid（联赛）；
VaR disx = 0；
VaR Disy = 0；
odiv.onmousedown =功能（EV）{
无功oevent = EV事件| |；
oevent.clientx - odiv.offsetleft disx =；
oevent.clienty - odiv.offsettop Disy =；
加载文档事件
document.onmousemove =功能（EV）{
无功oevent = EV事件| |；
odiv.style.left = oevent.clientx - disx + 'px；
odiv.style.top = oevent.clienty - Disy + 'px；
}；
document.onmouseup =函数（）{
document.onmousemove = null；
document.onmouseup = null；
}；

返回false；

}；

}；



现在程序已经完成，但是用户体验中存在一些问题。

例如，用户可以将div从浏览器中拖出来，然后如何解决呢

然后我们会做出决定，如果你在左边走，这很简单。



那只是0，他不在左边走，然后顶部是相同的。

那么，你如何防止它从右边出去呢很明显，画一幅画。事实上，我们可以计算网页的能见度减DIV的宽度

这就是所谓的最大值，判断移动距离超过最大值等于最大值。

完整的代码附呈。



拖动/关闭div漏洞的低div版本
在window.onload =函数（）{
无功odiv = document.getelementbyid（联赛）；var disx = 0；
VaR Disy = 0；
odiv.onmousedown =功能（EV）{
无功oevent = EV事件| |；
oevent.clientx - odiv.offsetleft disx =；
oevent.clienty - odiv.offsettop Disy =；

document.onmousemove =功能（EV）{
无功oevent = EV事件| |；
存储位置
无功odivleft = oevent.clientx - disx；
无功odivtop = oevent.clienty -迪西；


从左侧拖动/ /
如果（odivleft＜0）{
odivleft = 0；
否则如果}（odivleft > { document.documentelement.clientwidth - odiv。offsetwidth）
odivleft = document.documentelement.clientwidth - odiv.offsetwidth；
}

如果（odivtop＜0）{
odivtop = 0；
否则如果}（odivtop > { document.documentelement.clientheight - odiv。offsetheight）
odivtop = document.documentelement.clientheight - odiv.offsetheight；
}

odiv.style.left = odivleft + 'px；
odiv.style.top = odivtop + 'px；
}；

document.onmouseup =函数（）{
document.onmousemove = null；
document.onmouseup = null；
}；
返回false；阻止默认事件，解决Firefox bug
}；
}；



因此，拖放很完整了。O（一_ u）O