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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
script标签属性用type还是language
Jan 21 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
js校验开始时间和结束时间
May 26 Javascript
JavaScript实现刮刮乐效果
Nov 01 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 url 加密解密函数代码
2011/08/26 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python实现多人聊天室
2020/03/31 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python后端接收前端回传的文件方法
2019/01/02 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
写好自荐信的技巧
2013/11/08 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
全国文明单位申报材料
2014/05/31 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年教研室工作总结
2014/12/06 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
python实现双链表
2022/05/25 Python