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 html()等方法介绍
Nov 18 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
深入解析php之sphinx
2013/05/15 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python中Lambda表达式详解
2019/11/20 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
户外宣传策划方案
2014/05/25 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL