JS拖动技术 关于setCapture使用


Posted in Javascript onDecember 09, 2010

JS拖动技术--- 关于setCapture (转自 剑胆琴心-.Net学习笔记)

<script type="text/javascript"> 
<!-- 
window.onload=function(){ 
objDiv = document.getElementById('drag'); 
drag(objDiv); 
}; 
function drag(dv){ 
dv.onmousedown=function(e){ 
var d=document; 
e = e || window.event; 
var x= e.layerX || e.offsetX; 
var y= e.layerY || e.offsetY; 
//设置捕获范围 
if(dv.setCapture){ 
dv.setCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 
} d.onmousemove=function(e){ 
e= e || window.event; 
if(!e.pageX)e.pageX=e.clientX; 
if(!e.pageY)e.pageY=e.clientY; 
var tx=e.pageX-x; 
var ty=e.pageY-y; 
dv.style.left=tx; 
dv.style.top=ty; 
}; 
d.onmouseup=function(){ 
//取消捕获范围 
if(dv.releaseCapture){ 
dv.releaseCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
//清除事件 
d.onmousemove=null; 
d.onmouseup=null; 
}; 
}; 
} 
//--> 
</script> 
<div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>
Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
详解Vue依赖收集引发的问题
Apr 22 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
一起来写段JS drag拖动代码
Dec 09 #Javascript
教您去掉ie网页加载进度条的方法
Dec 09 #Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 #Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 #Javascript
来自国外的页面JavaScript文件优化
Dec 08 #Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
javascript中callee与caller的用法和应用场景
Dec 08 #Javascript
You might like
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js实现简单计算器
2015/11/22 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
求网格中的黑点分布
2013/11/06 面试题
求职自荐书范文
2013/12/04 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书