直观的理解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. 题目：求1+2+…+n，

    题目:求1+2+-+n, 要求不能使用乘除法.for.while.if.else.switch.case等关键字 以及条件判断语句(A?B:C). java 实现 public class sum { ...

  2. [leetcode] 390 Elimination Game

    很开心,自己想出来的一道题 There is a list of sorted integers from 1 to n. Starting from left to right, remove th ...

  3. 贝塞尔曲线（cubic bezier）

    对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...

  4. Mesos高可用解决方案剖析

    本文作者王勇桥,80后的IT攻城狮,供职于IBM多年,Mesos和Swarm社区的贡献者.本文是他根据自己对Mesos的高可用(High-Availability)设计方案的了解以及在Mesos社区贡 ...

  5. maven执行报错resolution will not be reattempted until the update interval of nexus h

    maven在执行过程中抛错: 引用 ... was cached in the local repository, resolution will not be reattempted until t ...

  6. 在powerdesigner中创建物理数据模型

    物理数据模型(PDM)是以常用的DBMS(数据库管理系统)理论为基础,将CDM/LDM中所建立的现实世界模型生成相应的DBMS的SQL语言脚本.PDM叙述数据库的物理实现,是对真实数据库的描述 PDM ...

  7. R内存管理与垃圾清理

    1.内存查看 memory.limit():查看内存大小 memory.limit(n):申请内存大小 memory.size(NA):查看内存大小 memory.size(T):查看已分配的内存 m ...

  8. Thisgood

    this is good test print 'haha'

  9. Shader实例:NGUI制作网格样式血条

    效果: 思路: 1.算出正确的uv去采样过滤图,上一篇文章说的很明白了.Shader实例:NGUI图集中的UISprite正确使用Shader的方法 2.用当前血量占总血量的百分比来设置shader中 ...

  10. python列表副本

    a=[1,2,3] b=[4,5,6] a=a+b #创建含a和b的副本的新列表 a [1, 2, 3, 4, 5, 6] b [4, 5, 6] c=a+b #创建含a和b的副本的新列表c [1, ...