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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
理解JavaScript原型链
2016/10/25 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python实现图片批量压缩程序
2018/07/23 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
is_file和file_exists效率比较
2021/03/14 PHP
大学生简历求职信
2014/06/24 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
银行催款通知书
2015/04/17 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
投标单位介绍信
2015/05/05 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang