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程序设计有所帮助。

Javascript 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 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
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
福利彩票幸运号码自动生成器
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python PyTorch预训练示例
2018/02/11 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python安装scipy的步骤解析
2019/09/28 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
公安机关查摆剖析材料
2014/10/10 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS