元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标。

拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件;鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)。然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽。

  • 一开始先监听鼠标按下事件mousedown,事件触发执行mouseHandler函数;
div.addEventListener("mousedown",mouseHandler);
  • 进入mouseHandler函数后,进行if else if 的判断,如果是按下事件,就监听鼠标移动和松开事件,这里要用document文档来作为监听对象,如果使用元素div监听时,如果鼠标在移动过程超出了div元素,就无法拖拽元素;
  • 进入移动事件,就把鼠标移动的距离(鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)赋值给元素的left和top,元素就可以随着鼠标移动;
  • 最后进入松开鼠标事件,删除了移动和送开鼠标事件,元素就会停在鼠标松开的位置

关键:元素显示位置=鼠标离可视窗口的位置 – 鼠标相对于在div元素左上角的位置

js代码带注释

       var div=document.querySelector("div");
var offsetX,offsetY;  //定义全局变量用于接收鼠标坐标的变量
div.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ //事件的执行函数自带参数e
if(e.type==="mousedown"){ //e.type是执行事件的类型
offsetX=e.offsetX;
offsetY=e.offsetY;
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler) //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数
}else if(e.type==="mousemove"){
div.style.left=e.clientX-offsetX+"px"; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标
div.style.top=e.clientY-offsetY+"px"; }else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler);
document.removeEventListener("mouseup",mouseHandler); //删除鼠标移动和鼠标松开事件
}
}

效果如图:

注意:div元素要设置定位才可以进行移动。

js拖拽效果的实现及原理的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js拖拽效果的实现

    1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  6. js拖拽效果详细讲解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  8. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

随机推荐

  1. VUE实现Studio管理后台(完结):标签式输入、名值对输入、对话框(modal dialog)

    一周的时间,几乎每天都要工作十几个小时,敲代码+写作文,界面原型算是完成了,下一步是写内核的HTML处理引擎,纯JS实现.本次实战展示告一段落,等RXEditor下一个版本完成,再继续分享吧.剩下的功 ...

  2. webstorm破解 2020 最新更新

    KNBB2QUUR1-eyJsaWNlbnNlSWQiOiJLTkJCMlFVVVIxIiwibGljZW5zZWVOYW1lIjoiZ2hib2tlIiwiYXNzaWduZWVOYW1lIjoiI ...

  3. [Python] iupdatable包:File模块使用介绍

    一.简介 文件模块主要是对常见的文件读写功能进行了封装,默认使用UTF8(utf_8_sig)格式编码,实现一行代码读写文件. 二.简单示例 安装 iupdatable 包 pip install - ...

  4. Java反射之构造方法反射

    上一篇Java反射之Class类我们介绍了java反射的关键类Class, 反射就是由一个java类映射得到一个java类. 所以,我们自然能想到,一个类中应该有哪些属性,这里做个比方,人有名字年龄等 ...

  5. model进阶

    本节目录 一 QuerySet 二 中介模型 三 查询优化 四 extra 五 整体插入 一 QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMI ...

  6. 详解分页组件中查count总记录优化

    1 背景 研究mybatis-plus(以下简称MBP),使用其分页功能时.发现了一个JsqlParserCountOptimize的分页优化处理类,官方对其未做详细介绍,网上也未找到分析该类逻辑的只 ...

  7. CSS样式命名

    CSS样式命名    说明网页公共命名#wrapper    页面外围控制整体布局宽度#container或#content    容器,用于最外层#layout    布局#head, #heade ...

  8. (转)协议森林03 IP接力赛 (IP, ARP, RIP和BGP协议)

    协议森林03 IP接力赛 (IP, ARP, RIP和BGP协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 网络层(net ...

  9. EPX Studio开发环境介绍

    相信用过Delphi的人,都很清楚FastScript,EPX Studio就是以FastScript为编程基础语言,由于FastScript支持类似于Delphi的Pascal语法,因此EPX St ...

  10. Java并发编程之CAS第一篇-什么是CAS

    Java并发编程之CAS第一篇-什么是CAS 通过前面几篇的学习,我们对并发编程两个高频知识点了解了其中的一个—volatitl.从这一篇文章开始,我们将要学习另一个知识点—CAS.本篇是<凯哥 ...