JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

2019-11-20 09:39:09

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现兼容各种浏览器的高级拖动方法。分享给大家供大家参考，具体如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>高级拖动</title> <style>  #toBeDraged{  width:100px;  height:100px;  line-height:100px;  border:1px solid red;  position:absolute;  text-align:center;  font-family:Arial, Helvetica, sans-serif;  cursor:move;  } </style> <script type= "text/javascript">  window.onload = function(){  doDrag();  }  function doDrag(){  var div = document.getElementById("toBeDraged");  var posx;  var posy;  div.onmousedown = function(e){   var e = e || window.event;   if (div.setCapture) {   div.setCapture();   }   posx = e.clientX - parseInt(div.offsetLeft);   posy = e.clientY - parseInt(div.offsetTop);   document.onmousemove = function(ev){   var ev = ev || window.event;//如果是IE   if (ev.setcapture) {   }   div.style.left = (ev.clientX - posx)+"px";   div.style.top = (ev.clientY - posy)+"px";   }   document.onmouseup = function(){   document.onmousemove = null;   document.onmouseup = null;   if (div.releaseCapture) {    div.releaseCapture();   }   }  }  } </script> </head> <body> <div id = "toBeDraged">你拖我啊!</div> </body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

下一篇：JavaScript检测原始值、引用值、属性