拖拽原理

  • 鼠标和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. JS学习笔记01

    文章转载pigpigpig4587 的 1.Javascript是区分大小写的语言.也就是说.关键字.变量,函数和所有的标识符都必须采取一致的大小写形式.因为html不严格区分大小写,所以在html中 ...

  2. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(完)

    前言 这一篇是本系列的最后一篇,虽然示例讲到这里就停止呢,但对于这些技术的学习远不能停止.虽然本示例讲的比较基础,但是正如我第一篇说到的,这个系列的目的不是说一些高端的架构设计,而是作为一个入门级,对 ...

  3. python cmd下运行中文乱码 策略

    如我运行一个脚本,执行后输出中文看不懂 然后呢在文件头加上 from __future__ import unicode_literals 注意:需要去掉所有字符串前的 u, 这样所有字符串均默认为u ...

  4. 在CDH5.5.0上安装Phoenix1.2

    1.下载CLABS版本的Phoenix CLABS_PHOENIX-4.5.2-1.clabs_phoenix1.2.0.p0.774-el6.parcel和manifest.json文件 2.将文件 ...

  5. 不懂指针就不要说自己学过C语言！

    不懂指针就不要说自己学过C语言! 1.掌握了指针,就掌握了C语言的精髓!计算机中绝大部分数据都放到内存中的,不同的数据放到不同的内存区域中. 内存角度没有数据类型,只有二进制:数据以字节(8位二进制) ...

  6. 测试数学公式latex

    \( J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! + 1)}{\left({\frac{x}{2}}\right)}^{2 m + ...

  7. Nginx+Tomcat构建动、静分离WEB架构

    一.简介 二.环境介绍 三.后端服务器安装配置 四.安装论坛 五.安装配置前端Nginx服务器 六.验证服务 一.Tomcat简介 Tomcat是Apache 软件基金会(Apache Softwar ...

  8. Linq中关键字的作用及用法

    Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...

  9. B2C电子商务基础系统架构解析(转载）

    系统的开发与演化,前台严格follow消费者的购买流程,后台则盯牢订单流转,牢牢抓住这两条主线,才能高屋建瓴的看清B2C的逻辑链和数据流,更深刻的规划功能模块,从而更有效支撑实际业务的流转. 前台 前 ...

  10. C# FTP/SFTP文件传输控件FTP for .NET/.NET CF 详细介绍

    FTP for .NET将FTP客户端功能添加到您的应用程序之中..NET控件的FTP支持所有常用的FTP服务器以及代理服务器,包括可扩展的目录解析.同步以及异步操作.主动与被动模式.以VB.NET与 ...