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,改变对话框的展现动画. ...
随机推荐
- oracle 物化视图 job
在oracle数据库里边,创建物化视图之后,系统在DBMS_jobs文件夹下,会自动创建相应的job,右键执行job的时候报错如下: 问题:ORA-12012: 自动执行作业 198 出错 ORA-1 ...
- MFC中小笔记
主要记录下一些有啊没啊的MFC东西. 1.单文档 去掉 无标题:在玩的时候用于FindWindow(class,title) BOOL CMainFrame::PreCreateWindow(CREA ...
- 项目实战6—Mysql实现企业级日志管理、备份与恢复实战
Mysql实现企业级日志管理.备份与恢复实战 环境背景:随着业务的发展,公司业务和规模不断扩大,网站积累了大量的用户信息和数据,对于一家互联网公司来说,用户和业务数据是根基.一旦公司的数据错乱或者丢失 ...
- PHP根据传入参数合并多个JS和CSS文件的简单实现
HTML(使用方法): 复制代码代码如下: <link rel="stylesheet" type="text/css" href="cssmi ...
- javassist：字节码编辑器工具
简介: javassist是一款可以在运行时生成字节码的工具,可以通过它来构造一个新的class对象.method对象,这个class是运行时生成的.可以通过简短的几行代码就可以生成一个新的class ...
- 【技能大赛笔记01】Zigbee点对点按键控制程序开发
[技能大赛笔记01]Zigbee点对点按键控制程序开发 --2017年"物联网物联网技术应用与维护"任务五题1(中职组) 1.题目要求 2.工程文件 在比赛中,提供了一个基于Bas ...
- 进程与进程描写叙述符（task_struct）
一. 进程 进程(Process) 计算机中的程序关于某数据集合上的一次执行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体: ...
- UICollectionView具体解释
初始化部分: UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myColl ...
- Struts2.5 伪静态的配置
伪静态 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还想运用动态脚本解决一些问题.不能用静态的方式来展示网站内容.但 ...
- nginx配置(windows配置）
以下是我的项目用到的一份配置文件#user nobody;worker_processes 4; #进程数,一般cpu是几核就写多少#error_log logs/error.log;#erro ...