jsDOM编程-拖拽层
页面样式代码：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>dom-浮动的div</title>
<script src="id.js" type="text/javascript"></script>
</head>
<body>
<div id="fu" style="width:200px;height:200px;position:absolute;left:154px;top:100px;z-index:200">
<div id="side" onmousedown="startdrag(this,event)" onmousemove="drag(this,event)" onmouseup="stopdrag(this)" style="cursor:pointer;width:195px;height:20px;position:absolue;left:0px;top:0px;font-size:9pt;padding-top:5px;padding-left:5px;color:#ffffff;z-index:200;">
浮动的窗口</div>
</div>
<script type="text/javascript">
var x =0; var y=0;//初始化鼠标的坐标
var x1 = 0; var y1=0;//初始化拖拽层fudiv的坐标
var moveable = false ;//默认拖拽层是不会移动的
//准备移动
function startdrag(currentobj,evt){
var e = evt? evt : window.event; //兼容非IE浏览器
if(!window.captureEvents){ //如果是ie的话
obj.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);//兼容火狐
}
/**
setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面
查MSND,对SetCapture()函数的说明为：“该函数在属于当前线程的指定窗口里设置鼠标捕获。
一旦窗口捕获了鼠标，所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
”一开始我看这个解释误认为了只要在属于窗口里的一个线程调用了SetCapture(hWnd)把hWnd设为当前的窗口句柄，那么以后的所有窗口消息都会发到我们指定的那个窗口消息队列中。
这样的理解是错误的！！！在你调用SetCapture(hWnd)函数后，只是能够捕获onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout鼠标消息，
但是一般我们是捕获onmousemove和onmouseup两个消息。需要只注意最后一句“如果鼠标光标在另一个线程创建的窗口上，
只有当鼠标键按下时系统才将鼠标输入指向指定的窗口”的解释，就是即使你在一个窗口线程里对了了SetCapture()，
但你在别的窗口的上点击了同样会把鼠标消息发个这个窗口而是我们通过调用SetCapture()设定那个窗口。
因为当鼠标在窗口外面点击的时候，被点击的窗口获得焦点，原来的SetCapture()也就失效了。
当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉，否则别的线程想调用就会失败。记住：SetCapture()和ReleaseCapture()必须成对呈现。
setCapture 使用方法
setCapture 可以捕获到 移动到浏览器外的鼠标事件。
例如拖动过程中，即使鼠标移动到了浏览器外，拖动程序依然可以执行！
作用就是把 把鼠标事件 捕获到 当前文档指定的对象！
setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
使用方法：
currentObj.setCapture();
在拖放结束后，应当使用releaseCapture() 来释放鼠标，使用方法: currentObj.releaseCapture();
这是ie 的专有方法，如果要兼容ff ，就要使用captureEvents 和 releaseEvents
使用方法
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
一般来说，当拖动过程中，使用事件冒泡，直接为 document.onmouseover 就可以达到ff 下的效果，不必使用captureEvents
releaseEvents 使用方法 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 一般来说，当拖动过程中，使用事件冒泡，直接为 document.onmouseover 就可以达到ff 下的效果，不必使用captureEvents
**/
var MoveWin = currentobj.parentNode; //获得父节点
x = e.clientX;//获得当前鼠标的x坐标值
y = e.clientY;//获得当前鼠标的y坐标值
x1 = parseInt(MoveWin.style.left); //取得当前的拖拽层的left值
y1 = parseInt(MoveWin.style.top);//取得当前的拖拽层的top值
moveable = true;//准备开始移动的标志
}
//开始移动
function drag(currentobj,evt){
var e = evt?evt:window.event;
var MoveWin = currentobj.parentNode; //获得父节点
if(moveable){
MoveWin.style.left = ((e.clientX-x)+x1) +'px';
MoveWin.style.top = ((e.clientY-y)+y1)+'px.';
}
}
//停止拖拽
function stopdrag(currentobj){
if(moveable){
//如果处于移动状态
if(!window.captureEvents){ //如果是ie的话
currentObj.releaseCapture();
}else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); //兼容火狐
//window.removeEventLisetener("MOUSEMOVE",drag,false);
}
moveable = false;
}
}
/*
或者这样写停止也行
//停止拖拽
function stopdrag(){
document.onmousemove = null;
}
*/
</script>
</body></html>
jsDOM编程-拖拽层的更多相关文章
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- jQuery实现类似Chrome控制台可拖拽改变宽度的样式
最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【j2ee】div浮动层拖拽
背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现 2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
- OpenLayers学习笔记（六）— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- win32拖拽编程
本文由作者邹启文授权网易云社区发布. 在邮箱大师PC版中,我们需要实现一个功能:账号和邮件夹拖拽排序. 准备 封装win32 API.我们使用到的API有, ImageList_Create.Imag ...
- 高德地图 Android编程中 如何设置使 标记 marker 能够被拖拽
由于本人对智能手机真心的不太会用,我本人大概是不到3年前才买的智能手机,用以前的索尼爱立信手机比较方便小巧,平时学习工作打个电话发个短信也就够了,出去吃饭一般都是朋友拿手机去弄什么美团团购啥的,然后我 ...
- jQuery拖拽 & 弹出层
了解更多请查看 官网 和 API iDrag & iDialog 介绍 特点: iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画. ...
随机推荐
- js代码大全（各种方法、属性）《转载》
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.sr ...
- JavaScript OOP（二）：this关键字以及call、apply、bind
JavaScript的this关键字非常灵活! this 返回的总是对象:即返回属性或方法"当前"所在的对象 var o1={ name:'apple', age:100, msg ...
- 数据库 SQL Server2012安装步骤详解
这篇文章主要给大家讲解一下数据库SQL Server2012的安装步骤(若有雷同纯属巧合,还望谅解!) 在正式安装之前,我们需要进行两个设置: ① 首先需要关闭Windows防火墙,若不关闭,后续的安 ...
- 乘积最大洛谷p1018
题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一个好朋友XZ也有幸得 ...
- HDU5983Pocket Cube
Pocket Cube Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tota ...
- php面试之四-Linux部分
php面试题之四——Linux部分(高级部分) 四.Linux部分 1.请解释下列10个shell命令的用途(新浪网技术部) top.ps.mv.find.df.cat.chmod.chgrp.gre ...
- Cs Round#56 D Find Path Union
题意:有一棵如下的完全二叉树,求所有给定结点到根节点的路径的并有多少条边. 一开始联想到线段树,发现结点的排布很像线段树的标号.于是模仿线段树敲了一下,交上去发现3个点MLE了... 无心优化,跑去看 ...
- Tomcat 源码分析（一）——启动与生命周期组件
写在前面的话:读Tomcat源码也有段时间了,大领悟谈不上.一些小心得记录下来,供大家参考相护学习. 一.启动流程 Tomcat启动首先需要熟悉的是它的启动流程.和初学者第一天开始写Hello Wor ...
- Nginx的反向代理与负载均衡
1.1 集群是什么 简单地说,集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服器.这些服务器之间可 ...
- 实现一个websocket常驻进程服务
由于工作的原因,近期调查了一下mac系统下常驻服务的接收websocket信息和创建进程的方法原理.将具体实现细节记录下来备忘. (一).准备工作 1.安装brew,在终端中输入: ruby -e & ...