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简单的图片放大缩小的两种方法
Nov 11 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JS中的作用域链
Mar 01 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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构造函数实例讲解
2013/11/13 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP如何实现跨域
2016/05/30 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
公司JAVA开发面试题
2015/04/02 面试题
Ejb技术面试题
2015/04/29 面试题
新闻发布会策划方案
2014/06/12 职场文书
超市促销活动总结
2014/07/01 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
先进教师个人总结
2015/02/11 职场文书
用人单位聘用意向书
2015/05/11 职场文书
美丽人生观后感
2015/06/03 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Java实现房屋出租系统详解
2021/10/05 Java/Android
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫