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 相关文章推荐
js控制分页打印、打印分页示例
Feb 08 Javascript
Jquery性能优化详解
May 15 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 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结合curl实现多线程抓取
2015/07/09 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
python可视化爬虫界面之天气查询
2019/07/03 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python可以用哪些数据库
2020/06/22 Python
python基于opencv实现人脸识别
2021/01/04 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
工作迟到检讨书
2014/02/21 职场文书
小学生安全演讲稿
2014/04/25 职场文书
国旗下演讲稿
2014/05/08 职场文书
车辆工程专业求职信
2014/06/14 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
雷锋观后感
2015/06/10 职场文书