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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
node.js中watch机制详解
2014/11/17 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python入门教程之识别验证码
2017/03/04 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
自我评价范文分享
2014/01/04 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
临床专业自荐信
2014/06/22 职场文书
司考复习计划
2015/01/19 职场文书
师德师风个人总结
2015/02/06 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android