html --- javascript --- div --- 拖拽方块

时间：2022-03-31 23:46:02

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

如有疑问请参照：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 --- 拖拽方块

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. Git使用教程

    配置Git 首先在本地创建ssh key: $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@your ...

  2. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  3. 深入理解Java虚拟机&lpar;二&rpar;、Java对象的创建，内存布局和访问定位

    对象的创建: Object obj = new Object(); 常量池中是否有Ljava.lang.Object

  4. Git基础 - git blame

    当想知道一段代码历史上有哪些人修改时,可以使用git blame查看,正如其名,当你看到那段让你抓狂的代码时,一定想找出是谁写的来一顿blame吧 : ) 使用方法 icebug@localhost: ...

  5. WWDC2014 debugging&lowbar;in&lowbar;xcode&lowbar;6 总结

    1.GCD的waiting queue 可以在Xcode左侧的面板中查看. 2.可以对View进行debug类似reveal. 3.查看运行时的对象,对于自定义对象可以实现- (id)debugQui ...

  6. The Shortest Path in Nya Graph

    Problem Description This is a very easy problem, your task is just calculate el camino mas corto en ...

  7. 代码bug

    1.webstorm ide未配置basePath本地会加入根路径 2.点击一次就销毁可以给标签设置一个值data-val="0" 某个函数只执行一次的方法,或者也可以考虑绑用on ...

  8. &lpar;后端&rpar;mybatis中使用Java8的日期LocalDate、LocalDateTime

    原文地址:https://blog.csdn.net/weixin_38553453/article/details/75050632 MyBatis的型处理器是属性“createdtime参数映射为 ...

  9. Faster&lowbar;RCNN 1&period;准备工作

    总结自论文:Faster_RCNN,与Pytorch代码: 代码结构:  simple-faster-rcnn-pytorch.py data __init__.py dataset.py util. ...

  10. 【iCore4 双核心板&lowbar;ARM】例程十二：通用定时器实验——定时点亮LED

    实验原理: 通过STM32的三个GPIO口来驱动LED灯的三个通道,设定GPIO为推挽输出模式,采 用灌电流的方式与LED连接,输出高电平LED灭,输出低电平LED亮,通过通用定时器TIM3 实现50 ...

相关文章