实现拖拽一个元素

拖拽的流程：

当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown

当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove

当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

<style>

  #box1{

    width: 100px;

    height: 100px;

    background-color: red;

    position: absolute;

  }

</style>

<body>

  <div id="box1"></div>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var box1 = document.getElementById("box1");

    //为box1绑定一个鼠标按下事件,当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown

    box1.onmousedown = function(event){

      event = event || window.event;

      //div的偏移量 鼠标.clentX - 元素.offsetLeft

      //div的偏移量 鼠标.clentY - 元素.offsetTop

      var ol = event.clientX - box1.offsetLeft;

      var ot = event.clientY - box1.offsetTop;

      //为document绑定一个onmousemove事件

      document.onmousemove = function(event){

        event = event || window.event;

        //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove

        //获取鼠标的坐标

        var left = event.clientX - ol;

        var top = event.clientY - ot;

        //修改box1的位置

        box1.style.left = left+"px";

        box1.style.top = top+"px";

      };

      //为document绑定一个鼠标松开事件

      document.onmouseup = function(){

        //当鼠标松开时，被拖拽元素固定在当前位置    onmouseup

        //取消document的onmousemove事件

        document.onmousemove = null;

        //取消document的onmouseup事件

        document.onmouseup = null;

      };

    };

  };

</script>

JavaScript的事件对象_实现拖拽的更多相关文章

  1. JavaScript的事件对象_鼠标事件

    鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等. 一.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 ...

  2. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  3. JavaScript的事件对象_概述/this

    JavaScript 事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能. 最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事 ...

  4. JavaScript的事件对象_滚轮事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  5. JavaScript的事件对象_其他属性和方法

    在标准的 DOM 事件中,event 对象包含与创建它的特定事件有关的属性和方法.触发的事件类型不一样,可用的属性和方法也不一样. 在这里,我们只看所有浏览器都兼容的属性或方法.首先第一个我们了解一下 ...

  6. JavaScript的事件对象_事件流

    事件流事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.事件流包括两种 ...

  7. H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  8. javascript事件类型之界面拖拽交互

    一.在线DEMO 界面拖拽交互

  9. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

随机推荐

  1. amazeui笔记-CSS 布局相关

    CSS 等分网格: 说明:.am-avg-sm-2  数字表示几等分 会将子元素 <li>的宽度设置为 50%. 只能用于 <ul> / <ol> 结构 辅助类: ...

  2. jQuery事件篇---事件对象

    内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...

  3. Spring Boot学习笔记(一)与JSP整合

    项目结构展示 在webapp目录下面手动创建JSP的目录和web.xml 创建web.xml只是为了不报错,在SpringBoot的项目中实际上用不到web.xml 打开pom.xml把框住的地方改成 ...

  4. Spring系列之——使用模板快速搭建springboot项目

    1 在官网https://start.spring.io/生成spring boot的模板 2 IDEA导入模板,设置如下勾选项,其他选项卡为默认值 3 idea呈现 4 新增controller类 ...

  5. K：双栈法求算术表达式的值

    相关介绍:  该算法用于求得一个字符串形式的表达式的结果.例如,计算1+1+(3-1)*3-(21-20)/2所得的表达式的值,该算法利用了两个栈来计算表达式的值,为此,称为双栈法,其实现简单且易于理 ...

  6. java设计模式-----4、单例模式

    单例模式是一种对象创建型模式,使用单例模式,可以保证为一个类只生成唯一的一个实例对象.也就是说,在整个程序空间中,该类只存在一个实例对象. 其实,GoF对单例模式的定义是:保证一个类,只有一个实例存在 ...

  7. Tomcat配置连接c3p0连接池

    一.Tomcat配置JNDI资源 JNDI(Java Naming and Directory Interface),Java 命名和目录接口. JNDI的作用就是:在服务器上配置资源,然后通过统一的 ...

  8. npm(cnpm)介绍(安装gulp)

    1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...

  9. BZOJ4513: [Sdoi2016]储能表(数位dp)

    题意 题目链接 Sol 一点思路都没有,只会暴力,没想到标算是数位dp??Orz 首先答案可以分成两部分来统计 设 \[ f_{i,j}= \begin{aligned} i\oplus j & ...

  10. CSS知多少

    1.Cascading Style Sheets 层叠样式表 2.层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程. 3. 样式的5大来源:浏览器默认样式.浏览器用户自定义样式.行内样式.内部 ...