使用js实现拖拽功能（附具体实现代码）

js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。
event.clientX和event.clientY分别是鼠标当前的横坐标和纵坐标，offsetX 和 offsetY 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的left和top值。

以下是一段可执行代码。

<html lang="en"><head><meta charset="UTF-8" /><title>Lazyload</title><style>.drag {background-color: skyblue;position: absolute;line-height: 100px;text-align: center;width: 100px;height: 100px;}</style></head><body><!-- left和top要写在行内样式里面 --><div class="drag" style="left: 0; top: 0">按住拖动</div><script src="./jquery-3.6.0.min.js"></script><script>// 获取DOM元素let dragDiv = document.getElementsByClassName('drag')[0]// 鼠标按下事件 处理程序let putDown = function (event) {dragDiv.style.cursor = 'pointer'let offsetX = parseInt(dragDiv.style.left) // 获取当前的x轴距离let offsetY = parseInt(dragDiv.style.top) // 获取当前的y轴距离let innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距let innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距// 按住鼠标时为div添加一个borderdragDiv.style.borderStyle = 'solid'dragDiv.style.borderColor = 'red'dragDiv.style.borderWidth = '3px'// 鼠标移动的时候不停的修改div的left和top值document.onmousemove = function (event) {dragDiv.style.left = event.clientX - innerX + 'px'dragDiv.style.top = event.clientY - innerY + 'px'// 边界判断if (parseInt(dragDiv.style.left) <= 0) {dragDiv.style.left = '0px'}if (parseInt(dragDiv.style.top) <= 0) {dragDiv.style.top = '0px'}if (parseInt(dragDiv.style.left) >=window.innerWidth - parseInt(dragDiv.style.width)) {dragDiv.style.left =window.innerWidth - parseInt(dragDiv.style.width) + 'px'}if (parseInt(dragDiv.style.top) >=window.innerHeight - parseInt(dragDiv.style.height)) {dragDiv.style.top =window.innerHeight - parseInt(dragDiv.style.height) + 'px'}}// 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件// 否则鼠标抬起后还可以继续拖拽方块document.onmouseup = function () {document.onmousemove = nulldocument.onmouseup = null// 清除borderdragDiv.style.borderStyle = ''dragDiv.style.borderColor = ''dragDiv.style.borderWidth = ''}}// 绑定鼠标按下事件dragDiv.addEventListener('mousedown', putDown, false)</script></body>
</html>

代码参考博客https://blog.csdn.net/HZ___ZH/article/details/119916909

另外html5中drag和drop实现拖拽可以参考该博客https://m.w3cschool.cn/article/81728598.html

使用js实现拖拽功能（附具体实现代码）相关推荐

原生js实现拖拽功能
一.写在前面如果我们想要实现拖拽的功能,必须要知道三个事件: 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件二.实现思路 ...
draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...
bootstrap拖动div_BootStrap modal实现拖拽功能
bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下在使用modal时首选需要引用js // 完成拖拽功能 // 完成Modal 编辑Html代码 Boo ...
Atitit。DD dragdrop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...

使用js实现拖拽功能（附具体实现代码）

使用js实现拖拽功能（附具体实现代码）相关推荐

最新文章

热门文章