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 相关文章推荐
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
layui前端时间戳转化实例
Nov 15 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调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
JS中的防抖与节流及作用详解
2019/04/01 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python使用folium excel绘制point
2019/01/03 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
社团文化节策划书
2014/02/01 职场文书
九年级政治教学反思
2014/02/06 职场文书
大学社团活动总结
2014/04/26 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2014年会计工作总结
2014/11/27 职场文书
党校学习党性分析材料
2014/12/19 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Python matplotlib多个子图绘制整合
2022/04/13 Python