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 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
js实现搜索栏效果
Nov 16 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JavaScript 接口原理与用法实例详解
May 12 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 操作excel文件的方法小结
2009/12/31 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
微信小程序自定义组件
2017/08/16 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python 动态加载的实现方法
2017/12/22 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
家长通知书教师评语
2014/04/17 职场文书
一年级学生期末评语
2014/04/21 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
关于远足的感想
2015/08/10 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python