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

如有疑问请参照：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. Ubuntu安装取色软件

    sudo apt-get install Gpick

  2. CentOS7-64bit 编译 Hadoop-2.5.0，并分布式安装

    摘要 CentOS7-64bit 编译 Hadoop-2.5.0,并分布式安装 目录[-] 1.系统环境说明 2.安装前的准备工作 2.1 关闭防火墙 2.2 检查ssh安装情况,如果没有则安装ssh ...

  3. notepad++使用技巧及插件汇总

    NppAutoIndent 自动缩进CCompletion 自动补全.TextFX 插件nppFTP 运行程序 ============================================ ...

  4. T430 Windows 8 的USB3.0无法识别

    去年10月入的T430,开始操作系统用的Win7,USB3.0的移动硬盘可以识别.后来,等到T430的Win8驱动都出来一段时间后,安装了Win8.开始没发现USB3.0不能使用,后来用移动硬盘是才发 ...

  5. AE 将地图导出为图片的两种方法

    在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...

  6. python中的 zip函数详解

    python中zip()函数用法举例 定义:zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple ...

  7. .htaccess的应用

    今天下班后,同事问到这个东西的用法.我以前也没接触过,特地搜索了一下,现在保存方便以后使用. 1.首先判断服务器类型,服务器是否支持. 2.写法是否有错误. 3.需要的功能是否在.htaccess是否 ...

  8. NDK(9)Application.mk各属性介绍

    本文参考 : http://blog.csdn.net/grimraider/article/details/7587816 在NDK中编写的是本地程序,这个程序的源码在 jni 下,这个本地项目的配 ...

  9. 对于json对像，怎么遍历json对象的所有key，在使用json对象时，如果无法知道key，怎么通过key变量来获取值

    对于json对像,怎么遍历json对象的所有key,在使用json对象时,如果无法知道key,怎么通过key变量来获取值?请参阅下面的关键代码: <html> <head> & ...

  10. Cookie操作类 实现记住用户名和密码的功能

    import java.util.Hashtable;import java.util.Iterator;import java.util.Set;import javax.servlet.http. ...