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剩余字数计算的代码
Jul 03 Javascript
JavaScript脚本性能优化注意事项
Nov 18 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
js数组依据下标删除元素
Apr 14 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python 调用c语言函数的方法
2017/09/29 Python
python三引号输出方法
2019/02/27 Python
python添加菜单图文讲解
2019/06/04 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
教师自荐信
2013/12/10 职场文书
工作鉴定评语
2014/05/04 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
结婚通知短信大全
2015/04/17 职场文书
面试通知单大全
2015/04/20 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android