编程 Javascript

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

Posted in Javascript onJune 21, 2016

本文实例讲述了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程序设计有所帮助。

- Author -

cherry

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

静态的动态续篇之来点XML

Dec 23 Javascript

jquery 问答知识整理

Feb 11 Javascript

jQuery中的ajax async同步和异步详解

Sep 29 Javascript

浅谈Node.js轻量级Web框架Express4.x使用指南

May 03 Javascript

最常用的jQuery表单验证(简单)

May 23 jQuery

jQuery 表单序列化实例代码

Jun 11 jQuery

JavaScript异步加载问题总结

Feb 17 Javascript

详解各版本React路由的跳转的方法

May 10 Javascript

如何用webpack4带你实现一个vue的打包的项目

Jun 20 Javascript

详解微信小程序之scroll-view的flex布局问题

Jan 16 Javascript

JS性能优化实现方法及优点进行

Aug 30 Javascript

Js实现粘贴上传图片的原理及示例

Dec 09 Javascript

JavaScript检测原始值、引用值、属性

Jun 20 #Javascript

Js 获取当前函数参数对象的实现代码

Jun 20 #Javascript

JS实现鼠标框选效果完整实例

Jun 20 #Javascript

javascript事件冒泡简单示例

Jun 20 #Javascript

JS实现的打字机效果完整实例

Jun 20 #Javascript

jQuery实现的网格线绘制方法

Jun 20 #Javascript

jQuery实现右下角可缩放大小的层完整实例

Jun 20 #Javascript