如何实现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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
ES6 Set结构的应用实例分析
Jun 26 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
php5.2时间相差8小时
2007/01/15 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
js实现时分秒倒计时
2019/12/03 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python正则表达式介绍
2012/08/06 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python 图像平移和旋转的实例
2019/01/10 Python
python调用支付宝支付接口流程
2019/08/15 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
正规的求职信范文分享
2013/12/11 职场文书
承诺书范文
2014/06/03 职场文书
讲党性心得体会
2014/09/03 职场文书
员工试用期自我评价
2014/09/18 职场文书
民事上诉状范文
2015/05/22 职场文书
李强优秀员工观后感
2015/06/16 职场文书
教师师德工作总结2015
2015/07/22 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
500字作文之难忘的同学
2019/12/20 职场文书