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实现的UBB编码函数
Mar 09 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
详解小程序用户登录状态检查与更新实例
May 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过滤html标记属性类用法实例
2014/09/23 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
DOM 事件流详解
2015/01/20 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python实现随机密码字典生成器示例
2014/04/09 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python requests模块实例用法
2019/02/11 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python如何导入依赖包
2020/07/13 Python
国际贸易个人求职信范文
2014/01/04 职场文书
求职自荐信的格式
2014/04/07 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
python flask开发的简单基金查询工具
2021/06/02 Python
Python实现视频中添加音频工具详解
2021/12/06 Python