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,改变对话框的展现动画. ...
随机推荐
- Django框架中的model（操作数据库）
什么是ORM ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作业务对象的时候,就不需要再去和复 ...
- 基于Emgu CV+百度人脸识别，实现视频动态 人脸抓取与识别
背景 目前AI 处于风口浪尖,作为 公司的CTO,也作为自己的技术专研,开始了AI之旅,在朋友圈中也咨询 一些大牛对于AI 机器学习框架的看法,目前自己的研究方向主要开源的 AI 库,如:Emgu C ...
- mysql索引优化面试题
曾经偷偷的面试了两个单位,都提到了Mysql的优化问题,所以以后要多多学习数据库的优化知识了.建设数据库的优化大概主要就是索引的优化了吧,因为我们不可能修改数据结构的情况下,提高数据库的查询效率似乎也 ...
- 常量和静态变量会先载入内存后在进行执行php代码
static $test=1;//在php执行前就已经写入内存$test++;var_dump($test);static $test=10;//在php执行前就已经写入内存var_dump($tes ...
- YiShop_商城网站建设应该注意什么
现在电子商务迅速发展,而专门搭建商城网站的第三方开发商也很多.现在搭建一个商城网站容易,如何运营一个商城网站才是重点.下面就由YiShop说说电子商城网站建设要思考什么呢(1)建设网站的目的是什么首先 ...
- 三十天学不会TCP,UDP/IP网络编程-ARP -- 连接MAC和IP
继续来做(da)推(guang)介(gao)我自己的!由于这两年接触到了比较多的这方面的知识,不想忘了,我决定把他们记录下来,所以决定在GitBook用半年时间上面写下来,这是目前写的一节,目前已完成 ...
- POJ 2195Going Home(网络流之最小费用流）
题目地址:id=2195">POJ2195 本人职业生涯费用流第一发!!快邀请赛了.决定还是多学点东西.起码碰到简单的网络流要A掉.以后最大流费用流最小割就一块刷. 曾经费用流在我心目 ...
- 利用qq设置个性化的域名邮箱
首先有域名.先去注冊先,国内有非常多域名交易平台.我是在易名中国网上注冊的一个域名,Lios.top,因为这个域名价值非常低.一年才 10元,价格非常实惠. 下一步就是去qq邮箱的设置里,找到账户,然 ...
- Android Static分析
1.static的变量或者方法会放在内存的一个方法区内 2.static变量会在该变量所属的类从内存中释放掉之后. 才会释放掉而类释放的条件是非常苛刻的. 必需要该类相应的全部对象被释放掉. 同一时候 ...
- lufylegend练习（1）帧速率
近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...