直观的理解div拖拽：当鼠标对着可拖拽部分按住后并拖动，div会跟着鼠标一起运动，并且其运动空间限制在浏览器内部，当放开鼠标时，则div停止运动。

实现div拖拽需要三个重要的事件：

（1）onmousedown-鼠标按下事件

（2）onmousemove-鼠标移动事件

（3）onmouseup-鼠标抬起事件

当鼠标移出浏览器后再回到浏览器内部时，会丢失对div的控制，需要再次按下鼠标移动div，为了改善这一小问题，代码中使用了setCapture和releaseCapture。

其中，setCapture方法是用于监视鼠标操作事件，即使鼠标移出浏览器照样能够捕捉到鼠标位置，当鼠标移回浏览器内部时，此时div依然跟随着鼠标移动；当然，releaseCapture方法就是释放对鼠标操作事件的监视。

需要注意的重点是div的坐标问题，当鼠标按住div后移动，div要跟着鼠标时时改变位置坐标。

效果展示

实现Div拖拽的更多相关文章

  1. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  2. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  3. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  4. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  5. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  6. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  7. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  9. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

随机推荐

  1. 加密狗的管理层API（C#代码）

    using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...

  2. Python os模块介绍

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curd ...

  3. maven打包时，依赖包打不进jar包中

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. hdu2662

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2662 莫名其妙写了一个题,感觉还是很有价值的记录一下. 题目大意:给两个互质的数,求用无限个它们不能组 ...

  5. 数据库SQL优化大总结之 百万级数据库优化方案

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  6. bzoj1412最小割

    太羞耻了,m n写反了(主要是样例n m相等) 建图方法比较高(ji)端(chu),对于可以加栅栏的地方连上1的边,然后求最小割即可 为了让代码优(suo)美(duan),我写了一个check,避免多 ...

  7. uva12063数位dp

    辣鸡军训毁我青春!!! 因为在军训,导致很长时间都只能看书yy题目,而不能溜到机房鏼题 于是在猫大的帮助下我发现这道习题是数位dp 然后想起之前讲dp的时候一直在补作业所以没怎么写,然后就试了试 果然 ...

  8. 一个简便的方法，获取某个页面元素的Xpath值

    今天了解到一个比较方便获取页面元素Xpath的方法,以下是获取步骤. 1:使用chrome浏览器打开百度:http://www.baidu.com 2:点击邮件,检查. 3:定位到某个页面的元素:点击 ...

  9. 通过监听键盘，实现对UITextView的内容移动

    视图出现时,增加观察 - (void)viewWillAppear:(BOOL)animated { // 增加对键盘的监听 [[NSNotificationCenter defaultCenter] ...

  10. jsp和mysql乱码

    jsp页面,mysql页面上的中文不显示为乱码,各个地方使用的编码(如UTF-8,GB18030,GBK等)的编码保持一致即可. 1. jsp页面的编码: <%@page language=&q ...