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之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
ES6 Object属性新的写法实例小结
Jun 25 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
TensorFlow如何实现反向传播
2018/02/06 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
C#实现启动一个进程
2016/10/01 面试题
初二政治教学反思
2014/01/12 职场文书
年度考核评语
2014/01/19 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
质量承诺书格式
2014/05/20 职场文书
运动会口号16字
2014/06/07 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书