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基本语法分析说明
Jun 15 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
实例解析Array和String方法
Dec 14 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
js实现简单音乐播放器
Jun 30 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
python传递参数方式小结
2015/04/17 Python
Python输出带颜色的字符串实例
2017/10/10 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python如何修改文件时间属性
2021/02/05 Python
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
高级Java程序员面试要点
2013/08/02 面试题
销售文员的岗位职责
2013/11/20 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
司机岗位职责说明书
2014/07/29 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL