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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js实现分页功能
May 24 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
微信小程序实现搜索功能
Mar 10 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查询及多条件查询
2017/02/26 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
简单JS代码压缩器
2006/10/12 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python开发游戏的前期准备
2019/05/05 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python图像读写方法对比
2020/11/16 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
上课迟到检讨书
2014/01/19 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
人资专员岗位职责
2014/04/04 职场文书
小组名称和口号
2014/06/09 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
python爬取新闻门户网站的示例
2021/04/25 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript