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 相关文章推荐
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
canvas红包照片实例分享
Feb 28 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
layui实现数据分页功能
Jul 27 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
js类中的公有变量和私有变量
2008/07/24 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
JS实现复制功能
2017/03/01 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue接口请求加密实例
2020/08/11 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
腾讯公司的一个sql题
2013/01/22 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
公司经理任命书
2014/06/05 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python