如何实现js拖拽效果及原理解析


Posted in Javascript onMay 08, 2020

元素拖拽分成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);  //删除鼠标移动和鼠标松开事件
      }
    }

效果如图:

如何实现js拖拽效果及原理解析

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JS实现评价的星星功能
Aug 20 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
JS图片预加载三种实现方法解析
May 08 #Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
You might like
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
js 文本滚动效果的实例代码
2013/08/17 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
python实现simhash算法实例
2014/04/25 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python动态性强类型用法实例
2015/05/09 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python多项式回归的实现方法
2019/03/11 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
几个人围成一圈的问题
2013/09/26 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
党员实事承诺书
2014/03/26 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
通知函的格式
2015/04/27 职场文书
2015年路政工作总结
2015/05/22 职场文书
离婚案件原告代理词
2015/05/23 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
JavaScript流程控制(分支)
2021/12/06 Javascript