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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
JavaScript中的各种宽高属性的实现
May 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写入数据库类代码分享
2011/07/26 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
公司薪酬管理制度
2014/01/31 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
项目投资合作意向书
2014/07/29 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
努力工作保证书
2015/02/28 职场文书
小平小道观后感
2015/06/09 职场文书
军训新闻稿范文
2015/07/17 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers