拖拽原理

  • 鼠标和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. ios基础篇（二十七）—— Json解析

    一.什么是Json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使 ...

  2. Linux小知识积累

    1.Linux图形界面和字符命令行界面的切换 从图形界面切换到字符界面,使用快捷键 Ctrl+Alt+F1 从字符界面切换到图形界面,使用快捷键 Ctrl+Alt+F7 2.解压文件 tar -xzv ...

  3. 无废话SharePoint入门教程二[SharePoint发展、工具及术语]

    一.前言 1.由于上一篇文章的标题命名失误,此篇标题写给百度搜索”什么是SharePoint”. 2.关于什么是SharePoint,请参见本人的第一篇文章:http://www.cnblogs.co ...

  4. 浏览器主页被hao123贱贱的篡改的一种方式

    今天打开一个PDF文件(正经文件,不要想歪了),误点了一个“编辑”按钮,出来发现浏览器主页被篡改了,包括chrome和IE.通过一个网址"www.qquuu8.com"跳转到hao ...

  5. IOS9 Swift

    Swift 2.0发布:即将开源,支持Linux [日期:2015-06-09] 来源:infoq  作者:Linux [字体:大 中 小]     在6月9日凌晨举行的WWDC 2015全球开发者大 ...

  6. RHEL 6.5 PXE 安装调试 VMWARE ESXi 5.1 安装

    测试环境:win10/vmware workstation 12 pro 操作系统:RHEL 6.5(PXE服务器) [2016.11.30] [遗留问题] 1.ks.cfg通过本地文件方式加载不成功 ...

  7. 【 2013 Multi-University Training Contest 3 】

    HDU 4622 Reincarnation 枚举字符串的起点,构造后缀自动机,每次插入一个字符,就能统计得到当前不同字串的个数,预处理出所有的询问. #include<cstdio> # ...

  8. c# 中int.ToString()的格式化的示例

    格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式说明符,指定格式化类型,xx 为精度说明符, ...

  9. 替换url中某个参数的值或是添加某个参数的方法(js 分页上下页可以使用)

    function changeUrl(base, find, value) { var offset = base.indexOf(find); var index; var rr = ''; if( ...

  10. 字母序列递增，即A+1=B，B+2=D，ASCII

    实际遇到的问题是 单号15001订单的15001-A自动生成15001-B,15001-C.... //说明:以15001-A为基准生成15001-B string maxno ="1500 ...