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实现返回顶部
Jan 26 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
比较node.js和Deno
Apr 27 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
Javascript验证方法大全
2015/09/21 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python中的高级数据结构详解
2015/03/27 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python 串口通信的实现
2020/09/29 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
计算机系统管理员求职信
2014/06/20 职场文书
小学新教师个人总结
2015/02/05 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书