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实现的分页函数
Feb 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
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 静态变量与自定义常量的使用方法
2010/01/26 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
python操作xml文件示例
2014/04/07 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python调用C语言的实现
2019/07/26 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
财务担保书范文
2014/04/02 职场文书
大学生找工作求职信
2014/07/09 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
劳模事迹材料范文
2014/12/24 职场文书
邀请函怎么写
2015/01/30 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
开工典礼致辞
2015/07/29 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
python实现图片批量压缩
2021/04/24 Python
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL