元素拖拽分成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. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  2. Python-Requests库的安装和调用

    #使用pip或者pip3安装requests库pip3 install requests #requests库:python #输入python进入命令行模式在cmd命令行中依次运行以下代码,或者直接 ...

  3. 调用系统的loading界面

    //在状态栏显示一个圈圈转动  代表正在请求 [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;

  4. opt目录

    在linux环境测试时,会部署到/opt目录下,这是为何呢? 下面来详解Linux的/opt目录: /opt:用户级的程序目录 这里主要存放那些可选的程序. 比如,你想部署firefox测试版,那就装 ...

  5. Java中将文件夹复制到另一个文件夹

    文件夹的拷贝*** public static void copyDir(String sourcePath, String newPath) { File start = new File(sour ...

  6. 序列化器:ModelSerializer

    ModelSerializer 类提供了一个快捷方式,可让你基于 Models 自动创建一个 Serializer 类,其中的字段与模型类字段对应. ModelSerializer 类与常规 Seri ...

  7. 从 Spring 的环境到 Spring Cloud 的配置

    需求 不知不觉,web 开发已经进入 “微服务”.”分布式” 的时代,致力于提供通用 Java 开发解决方案的 Spring 自然不甘人后,提出了 Spring Cloud 来扩大 Spring 在微 ...

  8. 浅谈ASP.NET Core中的DI

    DI的一些事 传送门马丁大叔的文章 什么是依赖注入(DI: Dependency Injection)?     依赖注入(DI)是一种面向对象的软件设计模式,主要是帮助开发人员开发出松耦合的应用程序 ...

  9. 【Weiss】【第03章】链表例程的一些修改

    主要是,感觉原来的链表例程通过Node的分配形成了链表,但是没有自动消除Node的办法比较危险,一旦在clear()之前把链表赋了其它值就内存泄漏了. 所以改了析构函数,自动清理分配出来的内存.既然改 ...

  10. 搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内含XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 搭建步骤: 1.在Windows系统中安装WAMP 下载地址:htt ...