直观的理解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. IIS设置默认主页无效

    服务器系统:Windows server 2008 R2 IIS版本:7.5 IIS中部署一个dotnet framework 3.5的网站应用程序,设置"默认文档"为:index ...

  2. 微信开发笔记：获取用户openid，以及用户头像昵称等信息

    微信开发的时候有一个很便利的途径来进行一个用户的一步注册登录,就是使用用户的微信信息来直接进行登陆,可以省去很多不必要的麻烦.那具体这些信息是如何来获取的呢? 首先呢,我们需要对微信进行一个授权,让微 ...

  3. 编写高质量的 Java 代码

    代码质量概述 代码质量所涉及的5个方面,编码标准.代码重复.代码覆盖率.依赖项分析.复杂度分析.这5方面很大程序上决定了一份代码的质量高低. 我们分别来看一下这5方面:编码标准:这个想必都很清楚,每个 ...

  4. 如何获取ResultSet的行数和列数

    当我们执行数据库查询返回一个ResultSet的时候,很多情况下我们需要知道这个ResultSet的大小,即它的行数和列数.我们知道它的列数可以通过resultSet.getMetaData().ge ...

  5. MYSQL 按照字母排序查询

    select  id vKey, name vValue from ib_brand order by convert(name USING gbk) COLLATE gbk_chinese_ci a ...

  6. C程序语法(无左递归)

    <程序> -〉 <外部声明> | <函数定义><外部声明> -〉<头文件> | <变量> | <结构体> <头 ...

  7. 织梦cms更新新建的栏目提示：DedeTag Engine Create File False:C:/phpStudy/WWW/

    这个问题怎么解决呢?只是更换了一下栏目名称.增加了新的栏目,结果就不行了. 问题原因: 新建的栏目没有"列表命名规则",导致cms解析的时候,出现解析错误. 解决办法 在下图填入: ...

  8. UE4 AI BehaviorTree 各个节点执行顺序总结

    一个游戏DEMO的AI部分 用到行为树组件如上 主要说一下这两个组件 一个装饰(类似过滤器) 一个服务(代码逻辑与Blackboard交互) Service分为 大碰撞 和 小碰撞 两个碰撞范围, 大 ...

  9. 统计学习方法 --- 感知机模型原理及c++实现

    参考博客 Liam Q博客 和李航的<统计学习方法> 感知机学习旨在求出将训练数据集进行线性划分的分类超平面,为此,导入了基于误分类的损失函数,然后利用梯度下降法对损失函数进行极小化,从而 ...

  10. Linux文件系统

    今天学习了Linux文件系统,现在来做个小总结. 首先Linux中一切都是文件,下面这个清单是Linux系统的顶层目录结构. 清单 1. Linux 系统的顶层目录结构 / 根目录 ├── bin 存 ...