JS高级拖动技术 setCapture,releaseCapture


Posted in Javascript onJuly 31, 2011
<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>

setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域。
如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面
Javascript 相关文章推荐
jquery动态加载图片数据练习代码
Aug 04 Javascript
JS判定是否原生方法
Jul 22 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
js中判断文本框是否为空的两种方法
Jul 31 #Javascript
图片onload事件触发问题解决方法
Jul 31 #Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 #Javascript
学习javascript,实现插入排序实现代码
Jul 31 #Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 #Javascript
IE6下focus与blur错乱的解决方案
Jul 31 #Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 #Javascript
You might like
windows平台中配置nginx+php环境
2015/12/06 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
巧用canvas
2017/01/21 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
体育教师工作总结的自我评价
2013/10/10 职场文书
工作自我评价分享
2013/12/01 职场文书
初中女生自我鉴定
2013/12/19 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
森林防火标语
2014/06/23 职场文书
海洋科学专业求职信
2014/08/10 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
聘任通知书
2015/09/21 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript