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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
javascript prototype,executing,context,closure
Dec 24 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
纯javascript版日历控件
2016/11/24 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
layui-select动态选中值的例子
2019/09/23 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python语法分析之字符串格式化
2019/06/13 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
国情备忘录观后感
2015/06/04 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis