拖拽原理

  • 鼠标和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. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  2. SVN使用教程

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  3. Spring4.1新特性——Spring缓存框架增强(转)

    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异 ...

  4. 【图像处理】【SEED-VPM】3.外设信息

    ———————————————————————————————————————————————————————————————————————— 摄像头接口 具有AV端子输出的彩色摄像头,摄像头广角8 ...

  5. AsyncTask

    package com.gg.test; import java.io.IOException; import org.apache.http.HttpResponse;import org.apac ...

  6. Xcode模拟器怎么模拟定位？

    new file --->添加一个.gpx文件 打开你的gpx文件,然后修改你想要模拟的经纬度: 运行时选上你刚才的位置

  7. 用JS获取地址栏参数的方法（超级简单）

    方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) {      var reg = new RegExp("( ...

  8. 硬件抽象层:HAL

    本节我们研究硬件抽象层:HALHAL,它是建立在Linux驱动之上的一套程序库.刚开始介绍了为什么要在Android中加入HAL,目的有三个,一,统一硬件的调用接口.二,解决了GPL版权问题.三,针对 ...

  9. SQL Server 检测到基于一致性的逻辑 I/O 错误 校验和不正确 ||尝试在数据库 5 中提取逻辑页 (1:1640) 失败

    use test go ALTER DATABASE test SET SINGLE_USER DBCC CHECKDB (test, repair_allow_data_loss) with NO_ ...

  10. Linux学习 ：Uboot, Kernel, 根文件系统初步分析

    1.U-Boot启动内核的过程可以分为两个阶段: 1)第一阶段的功能 硬件设备初始化 加载U-Boot第二阶段代码到RAM空间 设置好栈 跳转到第二阶段代码入口 2)第二阶段的功能 初始化本阶段使用的 ...