JS拖动技术--- 关于setCapture
<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>
--------------------------------------
setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域。
如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面
JS拖动技术--- 关于setCapture的更多相关文章
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- 自己封装的一个原生JS拖动方法。
代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...
- js拖动层原形版
脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...
- React.js 常用技术要点
最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...
- Node.JS + MongoDB技术浅谈
看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座 云计算 +大数据 ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- JS 拖动DIV 需要JQUERY 支持
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- touch.js 拖动、缩放、旋转 (鼠标手势)
可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVa ...
- jQuery插件EasyDrag轻松实现JS拖动的效果
jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...
随机推荐
- POJ 1821 单调队列+dp
题目大意:有K个工人,有n个墙,现在要给墙涂色.然后每个工人坐在Si上,他能刷的最大范围是Li,且必须是一个连续子区间,而且必须过Si,他刷完后能获得Pi钱 思路:定义dp[i][j]表示前i个人,涂 ...
- UL/LI
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1&quo ...
- linux下的文本处理命令sed&awk&grep
Sedsed 是个精简的.非交互式的编辑器.他能执行和编辑vi和emacs相同的编辑任务.sed编辑器不提供交互使用方式:只能在命令行输入编辑命令.指定文件名,然后在屏幕上察看输出.sed编辑器没有破 ...
- UILabel 详解
转自:http://blog.csdn.net/zhaopenghhhhhh/article/details/16331041 ·UILable是iPhone界面最基本的控件,主要用来显示文本信息.· ...
- phpstrom 快捷键
常用的PHPStorm快捷键:ctrl+j 插入活动代码提示ctrl+alt+t 当前位置插入环绕代码alt+insert 生成代码菜单ctrl+q 查看代码注释ctrl+d 复制当前行ctrl+y ...
- PAT (Advanced Level) 1013. Battle Over Cities (25)
并查集判断连通性. #include<iostream> #include<cstring> #include<cmath> #include<algorit ...
- 红黑树(C#)
红黑树C#算法. 在线javascript演示地址:http://sandbox.runjs.cn/show/2nngvn8w using System; using System.Collectio ...
- CSS中的浮动清除
先来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 理想的效果:可实际的效果: 这个地方就涉及到浮动,因为两个父元素div都没有高度(或者小于子元素的 ...
- Laravel Auth验证
laravel自带了auth类和User模型来帮助我们很方便的实现用户登陆.判断. 首先,先配置一下相关参数 app/config/auth.php: model 指定模型 table 指定用户表 p ...
- Struts2的整体回顾(Action, 拦截器, 值栈, OGNL表示式, ModelDriven)
ValueStack里有map(request, session, attr, parameters)和对象栈. Map调用的方法: ActionContext.getContext().put(k, ...