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中两个感叹号的作用说明
Dec 28 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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 正则匹配函数体
2009/08/25 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python导入模块交叉引用的方法
2019/01/19 Python
使用Python封装excel操作指南
2021/01/29 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
优秀护士获奖感言
2014/02/20 职场文书
村干部培训班主持词
2014/03/28 职场文书
小学生期末评语
2014/04/21 职场文书
项目投资合作意向书
2014/07/29 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2014年教育工作总结
2014/11/26 职场文书
学生党员检讨书范文
2014/12/27 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android