当鼠标拖拽的很快时，光标会走出方块，所以把事件注册在了方块的父节点上，

如有疑问请参照：http://blog.csdn.net/a9529lty/article/details/2708171

使用了 IntelliJ IDEA 的html编辑器，推荐大家使用

多说无益，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖拽div</title>
</head>
<body>
<div id="background" style="width:800px;height:450px;background-color:lightblue">
    <div id="drag_div" style="width:50px;height:50px;background-color:red"></div>
</div>
<script>
    var background = document.querySelector("#background");
    var div1 = background.querySelector("#drag_div");

    var dragable = false;
    div1.onmousedown = function(event){
        var thisP = {X : this.offsetLeft, Y : this.offsetTop};
        var eventP = {X : event.pageX, Y : event.pageY};
        dragable = true;

        var this_outer = this;
        this.parentNode.onmouseup = function(event){
            dragable = false;
            this.onmouseup = null;
            this.onmousemove = null;
        }
        this.parentNode.onmousemove = function(event){
            if(dragable){
                this_outer.style.position = "absolute";
                var currentP = {X : event.pageX, Y : event.pageY};
                this_outer.style.left = currentP.X - eventP.X + thisP.X + "px";
                this_outer.style.top  = currentP.Y - eventP.Y + thisP.Y + "px";
            }
        }
    }

</script>

</body>
</html>

运行结果如下，童鞋们可以把上面的代码拷贝到文本文档里另存为html格式， 然后用浏览器打开就可以看到结果了 ！

html --- javascript --- div --- 拖拽方块的更多相关文章

  1. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  2. 纯js实现DIV拖拽

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

  3. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  4. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  5. html之div拖拽，html5拖拽

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

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

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

  7. 案例：简易的Div拖拽

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

  8. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  9. Javascript之拖拽库

    在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...

随机推荐

  1. USACO Section 2.2: Party Lamps

    这题有个小技巧, 按一个键两次等于没按,所以如果depsum > 16的话其实不用做深搜到depsum次,而只要16次就可以了. /* ID: yingzho1 LANG: C++ TASK: ...

  2. Html 全屏切换效果

    来源 http://www.imooc.com/learn/374 pageswitch.js (function ($) { var defaults = { 'container': '#cont ...

  3. postgreSQLG关闭活动的connection、删除活动的数据库

    First, find the activities that are taken place against the target database, you can query thepg_sta ...

  4. 解决Hibernate Write operations are not allowed in read-only mode的方法

    错误信息: org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed i ...

  5. 石阶 VS 石像

    山庙有尊雕刻精美的佛像,前来拜佛的人络绎不绝. 铺在山路上的石阶开始抱怨:“大家同是石头,凭什么我被人蹬来踩去,你却被人供在殿堂?” 佛像笑了笑:“当年你只挨六刀,做了一方石阶,而我经历了千刀万凿之后 ...

  6. poj 1017 Packets 裸贪心

    Packets Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43189   Accepted: 14550 Descrip ...

  7. WCF约束名称的用法

    <!--<endpoint address="" binding="basicHttpBinding" bindingConfiguration=& ...

  8. 总结Selenium自动化测试方法（二）测试环境搭建

    (接上期内容) 二.测试环境搭建 1.安装python 现在python3.0比python2.0多了一些改进的功能(详见http://zhidao.baidu.com/link?url=3sT1g7 ...

  9. 《OD学Oozie》20160807Oozie

    一.引入 MapReduce Job Hive 脚本任务 同一个业务:先后.定时调度 工作流: 定义工作流程 activity jbpm oozie: 大数据工作流定义与调度框架 专门定义与调度Map ...

  10. 无锁编程(六) - seqlock(顺序锁)

    seqlock(顺序锁) 用于能够区分读与写的场合,并且是读操作很多.写操作很少,写操作的优先权大于读操作. seqlock的实现思路是,用一个递增的整型数表示sequence.写操作进入临界区时,s ...