编程 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 相关文章推荐

js树形控件脚本代码

Jul 24 Javascript

JavaScript 弹出窗体点击按钮返回选择数据的实现

Apr 01 Javascript

JavaScript中yield实用简洁实现方式

Jun 12 Javascript

如何让easyui gridview 宽度自适应窗口改变及fitColumns应用

Jan 25 Javascript

node.js中的buffer.copy方法使用说明

Dec 14 Javascript

JavaScript实现的Tween算法及缓冲特效实例代码

Nov 03 Javascript

详解Vue-基本标签和自定义控件

Mar 24 Javascript

angular2模块和共享模块详解

Apr 08 Javascript

JS获取指定月份的天数两种实现方法

Jun 22 Javascript

详解vue-router导航守卫

Jan 19 Javascript

layui使用表格渲染获取行数据的例子

Sep 13 Javascript

Nuxt pages下不同的页面对应layout下的页面布局操作

Nov 05 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