直观的理解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. php gzcompress() 和gzuncompress()函数实现字符串压缩

    当我们说到压缩,我们可能会想到文件压缩,其实,字符串也是可以压缩的. PHP提供了 gzcompress() 和gzuncompress() 函数: $string = “Lorem ipsum do ...

  2. DataGridView回车焦点横向移动

    protected override bool ProcessCmdKey(ref Message msg, Keys keyData)        {            if (keyData ...

  3. 安装sqoop

    安装sqoop 1.默认已经安装好java+hadoop 2.下载对应hadoop版本的sqoop版本 3.解压安装包 tar zxvf sqoop-1.4.6.bin__hadoop-2.0.4-a ...

  4. 窗体Showmedol 遇到的奇怪异常： cannot make a visible window model

    //窗体Showmedol 遇到的奇怪异常: cannot make a visible window model //背景:ShowModal A窗体,A窗体再ShowModal B窗体:A是透明背 ...

  5. url中的特殊字符问题

    在 使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312, 而在接收页面使用UTF8,这样接收到的参数就可能会 ...

  6. 【转载】AB测试结果分析

    AB测试,200个请求,20个并发.这样的测试强度,CPU占了70-80%,w3p占用了70多M内存,本想多测几次,看看它的内存会不会涨上去,没 有测试机器没办法,开发机要干活.我估计CPU就有问题了 ...

  7. php操作mysql

  8. php js数组问题

    <script type="text/javascript"> var a = new Array(); a = "a"; a = "b& ...

  9. Linux下添加apache虚拟主机

    一切在确保apache被正确安装的前提下 设置虚拟主机 创建虚拟目录 现在,让我们继续安装虚拟主机.虚拟主机命名为local.gis. 创建一个公用的文件夹来存放这虚拟主机的数据. 首先,让我们为lo ...

  10. 【模拟】POJ 3087

    直达–>POJ 3087 Shuffle'm Up 题意:一开始没怎么看明白,注意现是从S2里拿牌放在最底下,再放S1,这样交叉放(我一开始以为是S1和S2随意哪个先放,分别模拟取最小),然后在 ...