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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
Javascript 面向对象 继承
May 13 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Postman的下载及安装教程详解
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默认安装产生系统漏洞
2006/10/09 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python随机取list中的元素方法
2018/04/08 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
通过代码实例了解Python异常本质
2020/09/16 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
护理学毕业生求职信
2013/11/14 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
护林防火标语
2014/06/27 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
一级电子管军用接收机测评
2022/04/05 无线电