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

如有疑问请参照：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. 280. Wiggle Sort

    题目: Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] ...

  2. .NET在EF中使用sql，用动态类吧！

    .NET在EF中使用sql,用动态类吧! 前言 在.NET中使用Entity Framework能快速.方便地结合LINQ来对数据库进行一系列的增删改查操作.但是由于EF根据表达式最后生成通用的sql ...

  3. .NET 压缩解压库发布，支持进度查看

    刚发布了一个 .net压缩解压库,基于SharpZipLib开发 ,支持进度查看,支持路径保持与否. CL.IO.Zip 是一个基于SharpZipLib的一个压缩和解压的类库,提供给用户在.net环 ...

  4. Maven实战（六）--- dependencies与dependencyManagement的区别

    在上一个项目中遇到一些jar包冲突的问题,之后还有很多人分不清楚dependencies与dependencyManagement的区别,本篇文章将这些区别总结下来. 1.DepencyManagem ...

  5. YTU 2618: B 求类中数据成员的最大值-类模板

    2618: B 求类中数据成员的最大值-类模板 时间限制: 1 Sec  内存限制: 128 MB 提交: 430  解决: 300 题目描述 声明一个类模板,类模板中有三个相同类型的数据成员,有一函 ...

  6. 安装hma master出错 Error: Package: perl-Mail-Sender-0.8.13-2.el5.1.noarch

    You are using the EPEL 5 version of the repo instead of 6, go into your /etc/yum.repos.d/epel.repo f ...

  7. asp存储过程

    dim s_ip,MyComm s_ip=request.ServerVariables("REMOTE_ADDR") Set MyComm = Server.CreateObje ...

  8. BZOJ 1009 GT考试（ac自动机+矩阵DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1009 题意:给定一个长度为m的串s.有多少种长度为n的串不包含s? 思路:(1)将s插入 ...

  9. 关于结构化BOM的思考

    参加了今天的"自主生产音箱类产品BOM结构问题"(即非采购而是制造的音箱)会议,我发现大家在会议上呈现的产品结构对生产计划的层级需求已上升到5层的需求了,又找段会胜要了各位前期就此 ...

  10. laravel/laravel和laravel/framework有何区别？

    在安装laravel的时候,我们一般是download github上的laravel/laravel,随后执行composer install,在这个过程中,你会发现composer其中的一项工作是 ...