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,改变对话框的展现动画. ...
随机推荐
- J Query库
J Query库 J Query选择器:与CSS选择器完全一致 J Query语法: (1)美元符定义J Query (2)选择符查询和HTML元素 (3)J Query带action方法执行对元素带 ...
- Oracle存储过程和自定义函数
新博客文章链接,欢迎大家评论探讨 概述 存储过程和存储函数是指存储在数据库中供所有用户程序调用的子程序叫存储过程.存储函数. 异同点: 存储过程和存储函数的相同点:完成特定功能的程序. 存储过程和存储 ...
- 【Mysql知识补充】
一.子查询 1.定义 子查询是将一个查询语句嵌套在另一个查询语句中.内层查询语句的查询结果,可以为外层查询语句提供查询条件.子查询中可以包含:IN.NOT IN.ANY.ALL.EXISTS 和 NO ...
- CCF-201509-1-数列分段
问题描述 试题编号: 201509-1 试题名称: 数列分段 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个整数数列,数列中连续相同的最长整数序列算成一段,问数列中共 ...
- SpringCache与redis集成，优雅的缓存解决方案
缓存可以说是加速服务响应速度的一种非常有效并且简单的方式.在缓存领域,有很多知名的框架,如EhCache .Guava.HazelCast等.Redis作为key-value型数据库,由于他的这一特性 ...
- Solr管理界面详解
- kubernetes入门实践
k8s中文文档 k8s概念比较多,有什么概念的疑惑的推荐看k8s中文文档. me的环境 操作系统:centos7 docker:1.12.6 环境跟me的不一致?不要慌,基本大部分操作都是行的通的. ...
- C++如何返回不定长数组
起初遇到这个问题的时候便得知无法返回,那么为了达到相同的目的,该怎么办呢? 第一个想法便是 int * void() { int * want = new int[size]; //......do ...
- shell脚本删除N天前的目录-----附linux和mac上date命令的不同
背景: 每日构建的东西.按日期放到不同的目录里. 现在天的构建放到2015-06-01里,明天的就放到2015-06-02里,依次类推.时间久了.须要一个脚本删除N天前的目录.(本例中N=7.即删除一 ...
- EventBus在Android中的简单使用
EventBus是一个方便与Android中各组件通信的开源框架,开源地址;https://github.com/greenrobot/EventBus.EventBus功能非常强大 ,今天在做一个功 ...