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 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
react以create-react-app为基础创建项目
Mar 14 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
JS的深浅复制详细
Oct 16 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
php 判断服务器操作系统的类型
2014/02/17 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python守护线程用法实例
2017/06/23 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python类中self参数用法详解
2020/02/13 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
新闻专业个人求职信
2013/12/19 职场文书
公司前台辞职报告
2014/01/19 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
高中生的自我评价
2014/03/04 职场文书
付款承诺函范文
2015/01/21 职场文书
四风之害观后感
2015/06/09 职场文书
六一儿童节致辞
2015/07/31 职场文书