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

如有疑问请参照：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. java Cache框架

    Cache框架乱炖   各类开源的缓存解决方案 JBossCache/TreeCacheJBossCache是一个复制的事务处理缓存,它允许你缓存企业级应用数据来更好的改善性能.缓存数据被自动复制,让 ...

  2. 【玩转Ubuntu】09. Ubuntu上安装apktool

    下载两个文件 到这里 https://code.google.com/p/android-apktool/downloads/list?q=label:Featured下载这个文件  1.  apkt ...

  3. linux 系统 tar 的用法详解

    [root@localhost xu]# tar --help 用法: tar [选项...] [FILE]... GNU ‘tar’ 将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中单独还 ...

  4. make clean、make mrproer、make distclean

    make clean.make mrproer 以及make distclean的区别 解压内核源码包后, 到内核源代码目录树的顶层目录, 执行# make helpCleaning targets: ...

  5. 台湾P2P平台

    2014年6月28日下午1:30,“2014两岸三地P2P网贷行业高峰论坛”在上海会展中心友谊会堂如期举行,现场高朋满座,来自全国各地的众多知名P2P网站平台的负责人参与了讨论,并就当前P2P行业的一 ...

  6. 标准模板库(STL)学习探究之vector容器

    标准模板库(STL)学习探究之vector容器  C++ Vectors vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被 ...

  7. 2010山东省第一届ACM程序设计竞赛

    休眠了2月了 要振作起来了!!... http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2155 因 ...

  8. ACM - ICPC World Finals 2013 H Матрёшка

    原题下载:http://icpc.baylor.edu/download/worldfinals/problems/icpc2013.pdf 题目翻译: 问题描述 俄罗斯套娃是一些从外到里大小递减的传 ...

  9. Linux多线程（三）（同步互斥）

    1. 线程的同步与互斥 1.1. 线程的互斥 在Posix Thread中定义了一套专门用于线程互斥的mutex函数.mutex是一种简单的加锁的方法来控制对共享资源的存取,这个互斥锁只有两种状态(上 ...

  10. 51nod1476 括号序列的最小代价

    这题应该可以用费用流写吧?不过我想不出贪心来TAT.其实还是单调队列乱搞啊T_T //ÍøÉϵÄÌ°ÐÄËã·¨ºÃÉñ°¡¡£¡£¡£ÎÒÖ»»áÓÃ×îС·ÑÓÃ×î´óÁ÷ÅÜTAT #in ...