Javascript拖放的一些高级应用(对代码进行逐行分析 便于您进行拖放)

拖之前先看看周围有东西会怎么样。高级浏览器不会有任何问题。我们把它放在IE7下测试一下，问题就出来了。数字

我们可以清楚地看到所有的角色都被选中了。用户体验很差，使用不方便。对了，我们之前加了一个退货假；帮我们解决了很多问题。如果去掉这个，chrome也会有同样的问题。也就是说，这还假；它可以解决chrome ff IE9浏览器的问题。

事实上，在我们的开发中，页面上会有很多元素，所以不可能只有一个div。其他地方拖动时不会被选中，比如百度地图，大家都可以玩。那么我们怎么做这样的拖累呢？你能解决IE7的问题吗？

解决方案：

我们可以用一点技巧来解决这个问题。这个技巧只有IE6-8支持，其实可以解决我们的问题，因为其他浏览器使用return false够了。让我们看看什么是技能。

是事件捕捉！在简要说明下附上代码。

title/title脚本类型=' text/JavaScript ' window . onload=function(){ var oBtn=document . getelementbyid(' BTN ')；obtn . onclick=function(){ alert(1)；};//网页上所有地方的事件都集中在一个按钮上，IE专用obtn . setcapture()；//点击a}/script/head body输入类型=' button ' id=' BTN ' value=' button '/body实际上意味着页面上的所有事件都集中在一个点上，而点击页面上的任何位置都会弹出一个，这就是setCapture()的功能。

将所有事件放在一个按钮中进行处理！这只是IE兼容！

那么，让我看看如何修改前面的代码。

首先，我们将所有文档改回div。记住我们之前说的，因为快速拖动鼠标很容易拖出div，所以所有的事件都被添加到文档中。

现在我们不必这么做了。在前一个div中添加一个setCapture()来查看效果。

将选择IE 7正文中的文本。br/如果不添加return false chrome ff，就会出现dsadad br/div id=' div 1 ' as dsadad as dsadad/div as dsadadasadd/body style type=' text/CSS ' # div 1 { width : 200 px；高度： 200 px；背景：红色；绝对位置：}/style script type=' text/JavaScript '//拖放空div火狐低版本有bug window . onload=function(){ varo div=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；var oDivLeft=oevent . client x-DIsX；var ODI vtop=oevent . clienty-disY；odiv . style . left=oDivLeft ' px '；odiv . style . top=ODI vtop ' px '；};odiv . onmouseup=function(){ odiv . onmousemove=null；oDiv.onmouseup=null};odiv . setcapture()；返回false//防止默认事件，解决火狐bug }；};/script这个时候，我们其实是在快速拖动，用鼠标拖出Div不会有问题。实际上，在添加setCapture()之后，整个网页上的所有事件都会聚集在这个div上。

现在，不会选择此文本。为什么呢？因为网页上的文字和图片的所有事件现在都在div上，所以他们无法获取事件！所以他们自然不会被选中。

当然，现在还有另一个问题？你会发现，当你试图选择那些单词时，你无法选择它们。

怎么办，事件都集中在div上。

所以呢，其实这个setCapture()就像一把锁，现在都锁住了，事件都在差异上面，现在解锁就可以了那相对应的就有释放捕获()；

释放捕获()；就是释放捕获。实际上在鼠标抬起的时候加上就可以了。

窗户。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；奥迪夫。风格。left=oDivLeft ' px奥迪夫。风格。top=ODI vtop ' px};奥迪夫。onmouseup=function(){ odiv。onmousemove=nulloDiv.onmouseup=nullodiv。释放捕获()；};奥迪夫。setcapture()；返回false//阻止默认事件，解决火狐的bug }；};现在就能解决文字选中的问题了。最后我们坐下兼容，实际上来说这个setCapture()是不兼容的，放在其他浏览器就错了。

那么很简单，我们只要合并这次与上一次的代码就可以了，兼容嘛做个如果判断就好。最后附上整理好的代码

脚本类型=' 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。客户-奥迪夫。偏移；if(odiv。setcapture){ odiv。onmousemove=mouseMoveoDiv.onmouseup=mouseUpodiv。setcapture()；//IE 7下文字就不会被选中其实就是文字或图片得不到事件} else { document。onmousemove=Mousemovedocument.onmouseup=mouseUp}函数mouse move(ev){ var oEvent=ev | | event；var oDivLeft=oevent。客户端x-DIsX；var ODI vtop=oevent。client y-DIsy；奥迪夫。风格。left=oDivLeft ' px奥迪夫。风格。top=ODI vtop ' px}函数MouseUp(ev){这个。onmousemove=nullthis.onmouseup=nullif(odiv。释放捕获){ odiv。释放捕获()；//释放捕获} }返回false//阻止默认事件，解决火狐的bug }；};/script好了，都搞定了O(_)O哈哈~