首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

HTML元素拖拽功能实现的完整实例

Posted in Javascript onDecember 04, 2020

1  需要了解的知识点

 1.1  offset（偏移量）

定义：元素在屏幕上占用的所有的可见的空间。

元素可见的大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小四个属性

HTML元素拖拽功能实现的完整实例

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）指的是元素内容及其内边距所占距的空间大小。

HTML元素拖拽功能实现的完整实例

clientWidth：元素内容区宽度 + 左右内边距宽度，单位为px。内联元素以及没有 CSS 样式的元素的clientWidth属性值为 0。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。只读属性。

clientHeight：元素内容区高度 + 上下内边距高度，单位为px。内联元素以及没有 CSS 样式的元素的clientHight属性值为 0。该属性包括内边距，但不包括水平滚动条（如果有）、边框和外边距。只读属性。

clientLeft：表示一个元素的左边框的宽度，单位为px。如果元素在左侧（右侧滚动条不算）有垂直滚动条，则该属性包括滚动条的宽度。clientLeft不包括左外边距和左内边距。只读属性。

clientTop：表示一个元素的上边框的宽度，单位为px。如果元素在顶部（底部滚动条不算）有水平滚动条，则该属性包括滚动条的宽度。clientTop不包括上外边距和上内边距。只读属性。

1.3  scroll（滚动区域）

我们一般看到的默认滚动条的宽度是17px。

滚动大小：指的是包含滚动内容的元素的大小。

HTML元素拖拽功能实现的完整实例

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>

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>

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>

HTML元素拖拽功能实现的完整实例

3  参考文献

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元素拖拽功能实现的文章就介绍到这了,更多相关HTML元素拖拽功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

HTML元素拖拽功能实现的完整实例

- Author -

lian_老练

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
小程序关于请求同步的总结
May 05 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
原生JS实现拖拽效果
Dec 04 #Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
分块(1) decorator(1) 数据保存(1) bs4(1) 装饰器(1) 二维数组(2) 网页解析(1) 读取(1) translation(2) 查找算法(1)
You might like
使用无限生命期Session的方法
2006/10/09 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php-app开发接口加密详解
2018/04/18 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
laravel框架路由分组，中间件，命名空间，子域名，路由前缀实例分析
2020/02/18 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
HTML页面定时跳转方法解析（2种任选）
2016/12/22 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python实现二分查找算法
2020/09/18 Python
彻底解决Python包下载慢问题
2020/11/15 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
澳大利亚头发和美容产品购物网站：OZ Hair & Beauty
2020/03/27 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
小学生美德少年事迹
2014/02/02 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python