php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
元素拖拽分成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元素要设置定位才可以进行移动。
以上就是本文的全部内容,希望对大家的学习有所帮助。
php拖拽原理,JS拖拽效果及原理解析相关推荐
- js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单 怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单 怎么实现 说说步骤吧 监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
- html5做出百叶窗效果,原生js实现百叶窗效果及原理介绍
百叶窗大家都见过吧!如图: 原理: 如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden:黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是 ...
- html动画的 原理,HTML5 Canvas动画效果实现原理
在线演示 使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, ...
- php拖拽原理,JS拖拽原理
实例 html> 拖拽 #ball { width: 50px; height: 50px; background-color: lightpink; border-radius: 50%; b ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
- js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码 原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址 下载地址
- 【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
最新文章
- 谈谈.NET Core中基于Generic Host来实现后台任务
- python下载matplotlib.finance模块_关于Matplotlib中No module named 'matplotlib.finance'的解决办法...
- HK-2000 数采仪系统说明之 7.HK7710 DTU 简单配置说明
- 基于Asterisk的VoIP开发指南(2)——Asterisk AGI程序编写指南
- 信息采集-火车采集器
- Android笔记 使用AIDL和远程服务实现进程通信
- mysql 前n个最大值_选择MySQL中的第n个最大值
- zabbix监控业务进程变动
- 量子计算机时空穿越,时光穿梭是否可行?未来人类真能穿越时空吗?科学家:不是不可能...
- 为了寻找当下最好的照片备份方式,我写了7000字的长文...
- 基于不确定性量化的非精确概率可靠性理论
- 中秋福利!三维重建/SLAM/点云/相机标定/深度估计/缺陷检测课程
- 关于H5中的Canvas API的探索
- 手把手教你用 Tauri+Vue 创建小型桌面应用
- 怎样检测计算机硬件是否正常,怎么检查电脑硬件是否有问题
- 绩点 计算 html,GPA算法大全,教你怎么算GPA
- cesium着色器学习系列2-Appearance对象
- dw如何制作图片自动切换效果_如何在Dreamweaver中制作图片切换的效果?
- java画球_我的世界 如何用指令画球 JAVA 1.13+
- Flutter学习第十四天:Flutter类似于淘宝的首页照片墙功能,让你的界面更加美观灵活?