拖拽原理

  • 鼠标和Div的相对距离不变
  • 三大事件
  • 把拖拽加到document上

拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离！

那么如何计算出物体到页面左端的距离呢？

当鼠标按下的时候（onmousedown），我们获取

鼠标距离左边&顶部 的值：clientX、clientY

物体距离左边&顶部的值：offsetLeft、offsetTop

这样我们就知道了，鼠标距离物体左边&顶部的距离，即：clientX - offsetLeft；clientY- offsetTop；

当鼠标移动的时候（onmousemove），我们获取

鼠标距离左边&顶部的值：clientX、clientY

同时鼠标距离物体左边&顶部的值已经计算出了，

那么物体距离左边&顶部的值，就会得出物体的left&top值。

这就算拖拽！

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width: 100px; height: 100px; background: red; position: absolute;}

</style>

<script>

window.onload = function() {

	/*

	onmousedown : 选择元素

	onmousemove : 移动元素

	onmouseup 	: 释放元素

	*/

	var oDiv = document.getElementById('div1');

	oDiv.onmousedown = function(ev) {

		var ev = ev || event;

		var disX = ev.clientX - this.offsetLeft;

		var disY = ev.clientY - this.offsetTop;

		document.onmousemove = function(ev) {

			var ev = ev || event;

			oDiv.style.left = ev.clientX - disX + 'px';

			oDiv.style.top = ev.clientY - disY + 'px';

		}

		document.onmouseup = function() {

			document.onmousemove = document.onmouseup = null;

		}

	}

}

</script>

</head>

<body>

	<div id="div1"></div>

    <div style="width: 100px; height: 100px; background: green; position: absolute; left: 400px; top: 200px;"></div>

</body>

</html>

Javascript 事件对象进阶（一）拖拽的原理的更多相关文章

  1. Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript的事件对象_实现拖拽

    实现拖拽一个元素 拖拽的流程: 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时,被拖拽元素固定在当前位置 onm ...

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

    一.在线DEMO 界面拖拽交互

  4. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  5. 第一百三十七节，JavaScript，封装库---修缮拖拽

    JavaScript,封装库---修缮拖拽 修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖 ...

  6. Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理

    拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位 ...

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

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

  8. 第一百二十节，JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  9. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

随机推荐

  1. Galera集群server.cnf参数调整--前言

    文档安排: 前言部分会简述下galera集群,正文中会针对我们线上的环境,在不断业务的情况下,进行参数调整的话,有些参数不能够进行配置,会以#***的形式写入配置文件中,文档也会进行进一步说明. 如果 ...

  2. BZOJ3143 [Hnoi2013]游走

    首先高斯消元解出每个点被走到的概率 注意到这里走到$n$就停下来了,所以$P(n) = 0$ 解出来以后,给每条边$(u, v)$赋边权$P(u) + P(v)$即可,然后直接贪心 /******** ...

  3. js面向对象的使用方法

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

  4. oracle常用系统表

    转自:http://blog.chinaunix.net/uid-200142-id-3479306.html dba_开头..... dba_users      数据库用户信息 dba_segme ...

  5. react-native执行 npm install cl.exe找不到 的问题

    最近在学习react-native,昨天在尝试某个demo时,执行 npm instal, 总是遇到 cl.exe文件找不到,最开始以为Microsoft Visual C++ 2015 Redist ...

  6. CSS入门

    CSS,层叠样式表,是对web页面显示效果进行控制的一套标准.当页面的内容受多种样式控制,将会按照一定的顺序处理.CSS的作用:(1)将网页的内容结构和格式控制分开.(2)可以精确控制页面的所有元素. ...

  7. 解决 git 提交文件提示 Filename too long 问题

    1.git config --system core.longpaths true 2.git config core.longpaths true

  8. algorithm -- 插入排序

    插入排序是<算法导论>中第一个介绍的算法,详细分析了插入排序的原理,执行过程,证明了算法的正确性.同时也引出了算法分析和算法分析常用的方法. 此文对原文作个转述,检验学到的知识. 文中使用 ...

  9. MicroERP1.0简介及下载

    Micro ERP(蓝本)适用于中小微型企事业单位实施信息化管理.本系统研发初始即摒弃了传统ERP所众所周知的诸多繁琐功能,始终坚持以简化流程.平稳实施.快 速应用为切入点.在功能不断完善.健壮的同时 ...

  10. Mysql Concat()bug

    1.http://bugs.mysql.com/bug.php?id=12030 CONCAT with INTEGER modifies result-set encoding 2.这个bug的修改 ...