JS拖动技术 关于setCapture使用


Posted in Javascript onDecember 09, 2010

JS拖动技术--- 关于setCapture (转自 剑胆琴心-.Net学习笔记)

<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>
Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
浅谈react useEffect闭包的坑
Jun 08 Javascript
一起来写段JS drag拖动代码
Dec 09 #Javascript
教您去掉ie网页加载进度条的方法
Dec 09 #Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 #Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 #Javascript
来自国外的页面JavaScript文件优化
Dec 08 #Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
javascript中callee与caller的用法和应用场景
Dec 08 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PDO::errorCode讲解
2019/01/28 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
js中new一个对象的过程
2017/02/20 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
经济系大学生求职信
2013/10/01 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
三年级学生期末评语
2014/12/26 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
基于Redis位图实现用户签到功能
2021/05/08 Redis
Oracle 区块链表创建过程详解
2021/05/15 Oracle
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python