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 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 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
Mysql的常用命令
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
vuejs实现递归树型菜单组件
2018/01/13 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python实现简易动态时钟
2018/11/19 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
财务简历的自我评价
2014/03/05 职场文书
销售员试用期自我评价
2014/09/15 职场文书
校园广播稿100字
2014/10/06 职场文书
降价通知函
2015/04/23 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js