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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
创建简单的node服务器实例(分享)
Jun 23 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python发展简史 Python来历
2019/05/14 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
毕业生如何写自荐信
2014/03/26 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
英语投诉信范文
2015/07/03 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
windows安装python超详细图文教程
2021/05/21 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python