实现拖拽一个元素

拖拽的流程：

当鼠标在被拖拽元素上按下时，开始拖拽 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的事件对象_键盘事件

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

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

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

  3. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  4. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  5. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  6. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  7. (93)Wangdao.com_第二十六天_鼠标事件

    鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click        按下鼠标(通常是按下主按钮)时触发.        mousedown 首先触发,mouseup 接着 ...

  8. 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码

    MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...

  9. css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

    引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...

随机推荐

  1. Catch That Cow 分类： POJ 2015-06-29 19:06 10人阅读 评论(0) 收藏

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 58072   Accepted: 18061 ...

  2. C#微信开发文档

    C#微信开发文档 开发前准备 微信公众平台链接: https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN 开发初期我们使用测 ...

  3. Mysql 升级到 5.6 后插入语句时间字段报错：Incorrect datetime value: '' for column 'createtime'

    今天部署服务器项目运行,当遇见有时间数据对象的插入和更新操作的时候,就报错,如下: Caused by: com.mysql.jdbc.MysqlDataTruncation: Data trunca ...

  4. 分布式算法一——一致性hash算法

    摘自:http://blog.csdn.net/sparkliang/article/details/5279393

  5. RabbitMQ系列二（构建消息队列）

    从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心.下面我们就围绕这三个主要组件,从应用使用的角度全面的介绍如何利用RabbitMQ构建消息队列 ...

  6. MySQL基础（五）——视图

    MySQL基础(五)--视图

  7. 【leetcode❤python】 223. Rectangle Area

    #-*- coding: UTF-8 -*-#先判断是否有重叠class Solution(object):    def computeArea(self, A, B, C, D, E, F, G, ...

  8. JAVA的文件创建

    package com.xia; import java.io.*; public class test2 { public static void main(String[] args) { //输 ...

  9. js对字符串的操作

    js对字符串的操作 concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charA ...

  10. 教你如何使用php session

    原文网址:http://www.jb51.net/article/42500.htm   学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实 ...