我们看看之前的拖拽在周围有东西的时候会出现甚么问题？ 在高级阅读器中不会有啥问题，我们放到ie7下面测试1下，问题就出来了。如图
我们可以很清楚的看到，文字都已被选中了。那这个用户体验很不好，用起来也不方便。顺便提1下，我们之前加了1个return false;帮我们解决了很多问题，如果去掉这个的话,Chrome也会出现1样的问题。那末也就是说这个return false;可以解决Chrome ff IE9+ 这些阅读器的问题。
实际上在我们开发中，页面上会有许多的元素组成，不可能就1个div，在你拖动的时候其他地方是不会被选中的，比如说百度地图，大家可以玩玩。
那我们如何做到这模样的1个拖拽呢？能够解决ie7的问题呢？
解决方案：
我们可以用1个小技能来解决，这个技能只有在ie6⑻支持，实际上就可以解决我们的问题，由于其他的阅读器用return false; 就够了。下面看看是甚么技能
就是事件捕获！！ 简单说明下 附上代码
<Title></> script type="text/JavaScript"> window.onload=function(){ var oBtn=document.getElementByID("btn); oBtn.onclick(){ alert(1); }; // 网页上所有地方的上的事件都集中到1个按钮身上 IE 专用 oBtn.setCapture(); 点击哪里都是da } </script> headbodyinput ="button" ID="btn" value="按钮" /> >
实际上就是页面上所有地方上的事件都集中到1点，点击页面任何位置都会d出a，也就是setCapture()作用。
把所有事件都集中到1个按钮来处理！！ 这个就只有IE兼容！！
这样，让我来看看如何修改之前的代码。。。。
我们首先把所有的document改回div，记不记得我们之前讲过由于鼠标拖动的快点就容易拖出div，所以把事件都加在document上。
而现在就没必要这样做了，给我们之前的div加上1个setCapture()看看效果。
> IE 7 中的文字会被选中 ， br />如果不加return false Chrome ff 也会有这样的问题 asdsadad /> div ID="div1"> asdsadad asdsadad asdsadad div> asdsadadasdsadadasdsadad ><style type="text/CSS"> #div1 { wIDth: 200px; height: background: red; position: absolute; } </style>
<script type="text/JavaScript"> // 拖拽空div 低版本的火狐有BUG window.onload = function() { var odiv = document.getElementByID("div1"); 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.clIEntX - disX; var odivtop = oEvent.clIEntY - disY; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; odiv.onmouseup = function() { odiv.onmousemove = null; odiv.onmouseup = null; }; odiv.setCapture(); return false; 禁止默许事件,解决火狐的BUG }; }; </script>
这个时候实际上我们拖动在快也不会出现鼠标拖出div的问题了。 实际上加了setCapture()以后，全部网页上所有的事件都集聚集在这1个div上面。
其实现在，这个文字就不会被选中了。为何呢？ 由于现在网页上的文字，图片的所有事件都在div上了，他们已得不到事件了！所以自然他们就不会被选中了。
固然现在又有个问题？？？？你会发现当你要试图去选中那些文字的时候，就选不中了。
如何是好，事件都集中在div上了。。。!!!!!
所以呢，其实这个setCapture()就像1把锁，现在都锁住了，事件都在div上面，现在解锁就能够了 那相对应的就有 releaseCapture();
releaseCapture(); 就是释放捕获。 实际上在鼠标抬起的时候加上就能够了。
window.onload = null; odiv.releaseCapture(); }; odiv.setCapture();现在就可以解决文字选中的问题了。 最后我们坐下兼容，实际上来讲这个setCapture() 是不兼容的，放在其他阅读器就错了。
那末很简单， 我们只要合并这次与上1次的代码就能够了，兼容嘛 做个if判断就好。最后附上整理好的代码
<script type="text/JavaScript"> window.onload = function() { var odiv = document.getElementByID("div1"); var disX = 0; var disY = 0; odiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clIEntX - odiv.offsetleft; disY = oEvent.clIEntY - odiv.offsettop; if (odiv.setCapture) { odiv.onmousemove = mouseMove; odiv.onmouseup = mouseUp; odiv.setCapture(); IE 7 下文字就不会被选中 其实就是文字或图片得不到事件 } else { document.onmousemove = mouseMove; document.onmouseup = mouseUp; } function mouseMove(ev) { var oEvent = ev || event; var odivleft = oEvent.clIEntX - disX; var odivtop = oEvent.clIEntY - disY; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; } function mouseUp(ev) { this.onmousemove = null; this.onmouseup = if (odiv.releaseCapture) { odiv.releaseCapture(); 释放捕获 } }好了，都弄定了 O(∩_∩)O哈哈~
其他精彩文章
jquery教程(19)-jquery AJAX *** 作之序列化表单jquery教程(18)-AJAX *** 作之履行POST要求jquery教程(20)-jquery AJAX + PHP *** 作之为AJAX要求提供不同...jquery教程(21)-jquery AJAX 回调函数jquery教程(22)-AJAX *** 作之毛病处理jquery教程(24)-AJAX *** 作之AJAX和事件更多关于androID开发@H_961_404@文章
总结以上是内存溢出为你收集整理的Javascript 拖拽的一些高级的应用――逐行分析代码，让你轻松了拖拽的原理全部内容，希望文章能够帮你解决Javascript 拖拽的一些高级的应用――逐行分析代码，让你轻松了拖拽的原理所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）