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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
javascript深入理解js闭包
Jul 03 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python装饰器原理与用法分析
2018/04/30 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
什么是继承
2013/12/07 面试题
初入社会应届生求职信
2013/11/18 职场文书
财务会计实习报告体会
2013/12/20 职场文书
健康教育评估方案
2014/05/25 职场文书
重阳节活动总结
2014/08/27 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
百年校庆感言
2015/08/01 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2019年思想汇报
2019/06/20 职场文书