HTML元素拖拽功能的实现
目录
1 需要了解的知识点
1.1 offset(偏移量)
1.2 client(客户区)
1.3 scroll(滚动区域)
1.4 window(窗口)
1.5 鼠标事件对象(mouseEvent)的一些属性
2 示例演示
2.1 元素水平拖拽效果实现
2.2 元素垂直拖拽效果实现
2.3 元素任意方向拖拽效果实现
3 参考文献
1 需要了解的知识点
1.1 offset(偏移量)
定义:元素在屏幕上占用的所有的可见的空间。
元素可见的大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小四个属性
offsetHeight:元素正在垂直方向上占用的大小空间,单位为px,不包括margin值。只读属性。
offsetWidth:元素在水平方向上占用的大小空间,单位为px,不包括margin值。只读属性。
offsetLeft:元素的左外边框至包含元素的左内边框之间的距离,单位为px。只读属性。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离,单位为px。只读属性。
offsetParent:是一个元素最近的并且是定位过(relative || absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素。只读属性。
element.offsetLeft和element.offsetTop取值问题,分多种情况:
如果element是body的直接子元素,返回值则是element距离body左侧或顶部的距离;
如果element不是body的直接子元素,在父元素进行定位(relative或absolute)的情况下,各浏览器返回值都是element距离父元素左侧或者是顶部的距离(唯一的区别就是chrome没有把边框计算进去,IE、firefox都计算进去了);
如果element不是body的直接子元素,父元素也没有进行定位的情况下,各浏览器返回的直接是element元素距body的距离。
从上面可以看出offsetLeft、offsetTop返回的值就是element到offsetParent的距离,这个offsetParent是什么元素要看ele的父元素有没有进行定位(relative、absolute)。
1.2 client(客户区)
定义:元素的客户区大小(client dimension)指的是元素内容及其内边距所占距的空间大小。
clientWidth:元素内容区宽度 + 左右内边距宽度,单位为px。内联元素以及没有 CSS 样式的元素的clientWidth属性值为 0。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。只读属性。
clientHeight:元素内容区高度 + 上下内边距高度,单位为px。内联元素以及没有 CSS 样式的元素的clientHight属性值为 0。该属性包括内边距,但不包括水平滚动条(如果有)、边框和外边距。只读属性。
clientLeft:表示一个元素的左边框的宽度,单位为px。如果元素在左侧(右侧滚动条不算)有垂直滚动条,则该属性包括滚动条的宽度。clientLeft不包括左外边距和左内边距。只读属性。
clientTop:表示一个元素的上边框的宽度,单位为px。如果元素在顶部(底部滚动条不算)有水平滚动条,则该属性包括滚动条的宽度。clientTop不包括上外边距和上内边距。只读属性。
1.3 scroll(滚动区域)
我们一般看到的默认滚动条的宽度是17px。
滚动大小:指的是包含滚动内容的元素的大小。
scrollHeight: 在没有滚动条的情况下,元素内容的总高度,单位为px。该尺寸包括元素的padding,但不包括元素的border、margin和水平滚动条宽度(如果存在)。
scrollWidth:在没有滚动条的情况下,元素内容的总宽度,单位为px。该尺寸包括元素的padding,但不包括元素的border、margin和垂直滚动条的宽度(如果存在)。
scrollLeft:被隐藏在内容区域左侧的像素值,通俗的解释就是元素水平滚动条到元素左边的距离。通过设置这个属性值可以改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素值,通俗的解释就是元素垂直滚动条到元素上方的距离。通过设置这个属性值可以改变元素的滚动位置。
1.4 window(窗口)
window.innerHeight:返回窗口的文档显示区的高度。
window.innerWidth:返回窗口的文档显示区的宽度。
window.outerWidth和window.outerHeight属性获取加上工具条与滚动条窗口的宽度与高度。
在Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。在Opera中,这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中,outerWidth.outerHeight与innerWidth,innerHeight返回相同的值,即视口(viewport)大小而非浏览器窗口大小。
IE没有提供取得当前浏览器窗口尺寸的属性。不过,它通过DOM提供了页面可见区域的相关信息。
在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和
document.documentElement.clientHeight中保存了页面视口的信息。在IE6中,这些属性必须在标准模式下才有效。如果是混杂模式,就必须通过docrunent.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome,则无论通过docurnent.documentElement还是document.body中的clientWidth和clientHeight属性,都可以取得视口的大小。
1.5 鼠标事件对象(mouseEvent)的一些属性
mEvent.clientX:返回鼠标触点相对于浏览器可见视区(或有效区域)左边沿的的X坐标,不包括任何滚动偏移,单位为px。这个值会根据用户对可见视区的缩放行为而发生变化。
mEvent.clientY:返回鼠标触点相对于浏览器可见视区(或有效区域)上边沿的的Y坐标,不包括任何滚动偏移,单位为px。这个值会根据用户对可见视区的缩放行为而发生变化。
mEvent.pageX:鼠标触点相对于HTML文档左边沿的的X坐标,单位为px。和clientX 属性不同,这个值是相对于整个html文档的坐标,和用户滚动位置无关。因此当存在水平滚动的偏移时,这个值包含了水平滚动的偏移。
mEvent.pageY:鼠标触点相对于HTML文档上边沿的的Y坐标,单位为px。和clientY 属性不同,这个值是相对于整个html文档的坐标,和用户滚动位置无关。因此当存在垂直滚动的偏移时,这个值包含了垂直滚动的偏移。
mEvent.screenX:返回鼠标触点相对于屏幕左边沿的X坐标,单位为px。不包含页面滚动的偏移量。
mEvent.screenY:返回鼠标触点相对于屏幕上边沿的Y坐标,单位为px。不包含页面滚动的偏移量。
mEvent.offsetX:当鼠标事件发生时,鼠标触点距离事件源元素左侧的X轴方向上的距离,单位为px。
mEvent.offsetY:当鼠标事件发生时,鼠标触点距离事件源元素顶部的Y轴方向上的距离,单位为px。
2 示例演示
2.1 元素水平拖拽效果实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>window.onload = () => {//获取拖拽实验对象let el=document.getElementById("blackSquare");//在该对象上绑定鼠标点击事件el.onmousedown = (e) => {//鼠标按下,计算鼠标触点距离元素左侧的距离let disX = e.clientX - el.offsetLeft;document.onmousemove = function (e) {//计算需要移动的距离let t = e.clientX - disX;//移动当前元素if (t >= 0 && t <= window.innerWidth - el.offsetWidth) {el.style.left = t + 'px';} };//鼠标松开时,注销鼠标事件,停止元素拖拽。document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};} }
</script>
</html>
2.2 元素垂直拖拽效果实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>window.onload = () => {//获取拖拽实验对象let el=document.getElementById("blackSquare");//在该对象上绑定鼠标点击事件el.onmousedown = (e) => {//鼠标按下,计算鼠标触点距离元素左侧的距离let disY = e.clientY - el.offsetTop;document.onmousemove = function (e) {//计算需要移动的距离let t = e.clientY - disY;//移动当前元素if (t >= 0 && t <= window.innerHeight - el.offsetHeight) {el.style.top = t + 'px';} };//鼠标松开时,注销鼠标事件,停止元素拖拽。document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};} }
</script>
</html>
2.3 元素任意方向拖拽效果实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="blackSquare" style="position: absolute; width:50px; height:50px; background-color: black;cursor: pointer;"></div>
</body>
<script>window.onload = () => {//获取拖拽实验对象let el=document.getElementById("blackSquare");//在该对象上绑定鼠标点击事件el.onmousedown = (e) => {//鼠标按下,计算鼠标触点距离元素左侧和顶部的距离let disX = e.clientX - el.offsetLeft;let disY = e.clientY - el.offsetTop;document.onmousemove = function (e) {//计算需要移动的距离let tX = e.clientX - disX;let tY = e.clientY - disY;//移动当前元素if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) {el.style.left = tX + 'px';} if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) {el.style.top = tY + 'px';} };//鼠标松开时,注销鼠标事件,停止元素拖拽。document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};} }
</script>
</html>
3 参考文献
https://www.cnblogs.com/ivan5277/p/9811242.html
https://www.jianshu.com/p/2a82ed72a192
https://developer.mozilla.org/zh-CN/docs/Web/API/Element
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
HTML元素拖拽功能的实现相关推荐
- php 元素 拖拉,Draggable Elements 元素拖拽功能实现代码_javascript技巧
当然我们可以研究js库的源码, 也可以自己去发明轮子试试看, 其过程还是挺有趣的...下面我就来实现下页面元素的拖拽功能 现在就开始着手实现, 让我们从最顶层的方法讲起, 它用于初始化一个drag o ...
- css元素可拖动,使用css-transform实现更好的拖拽功能
拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用transform来实现这一功能. 一.拖拽的用户行为分析与原理解析 二.代码实现 三.总结 本文所涉及的 ...
- draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- Python+selenium 自动化高级应用篇:借助pyautogui实现web前端带轨迹拖拽功能,解决ActionChains拖拽失效问题
有一些 web 前端的交互,必须有鼠标轨迹才能成功的实现拖拽功能. 而 selenium 自带的 ActionChains 方法,是一瞬间从 A 点到 B 点的. 解决思路: 利用元素返回的相对浏览器 ...
- js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件 拖拽的基本原 ...
- 拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: ...
- 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现.我也是在vuedraggable的基础上扩展实现的,如何想了解更多 ...
- vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
- vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
- 实现元素拖拽放大缩小_Vue实战067:DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
最新文章
- python推荐系统-python 新闻推荐系统(基于新闻内容推荐)
- [转载] 让SciTE能够和IDE一样进行成员提示
- C++实现坐标的平移和旋转
- OpenCV的AdaptiveThreshold函数
- dubbo 自定义线程池
- 什么叫做石英表_什么是石英表 石英表是什么意思
- java repaint 无效_java repaint()无效
- 使用ANT编译项目报错 com.sun.image.codec.jpeg does not exist 解决方法
- 在XCode工程中创建bundle文件
- oracle数据库报错09275,项目连接Oracle数据库报错
- log4j容器初始化探究
- python实现连接池技术
- CSS表格和表单的样式
- c# RestClient 请求接口
- 记忆力:魔方基础教程
- Java工程师 数据结构与算法 数组面试题(Day40)
- 2018新年庙会归来
- ROC和DO的双重设计:打造出支付领域的重磅产品
- Android sqlite执行insert,英文单引号报错问题的解决
- 湖南c语言程序设计,C语言程序设计
热门文章
- 简单文本分割器V1.0发布(包括源码)
- 一起用Python做个自动化弹钢琴脚本,我竟然弹出了《天空之城》!
- tungsten replicator oracle,Tungsten Replicator 实验
- Stack栈后进先出
- 新闻文本分类学习笔记
- 思科交换机与路由器常用基础配置
- 金仓数据库KingbaseES数据库概念(六)--数据库对象管理
- 2055040-79-2,Acid-PEG5-TEMPO具有末端羧酸和TEMPO部分的PEG连接剂
- 西安交大计算机录取分数线,2017年西安交通大学各省录取分数线
- 计算机加硬盘后速度变慢,硬盘速度变慢怎么办 硬盘速度慢解决方法步骤介绍【详解】...