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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
ExtJS的拖拽效果示例
2013/12/09 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
简单了解python变量的作用域
2019/07/30 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python调用飞书发送消息的示例
2020/11/10 Python
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
搞笑的获奖感言
2014/08/16 职场文书
爬山的活动方案
2014/08/16 职场文书
评先进个人材料
2014/12/29 职场文书
婚礼父母答谢词
2015/01/04 职场文书
死亡诗社观后感
2015/06/05 职场文书
电影红河谷观后感
2015/06/11 职场文书
银行工作心得体会范文
2016/01/23 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Python+pyaudio实现音频控制示例详解
2022/07/23 Python