当前位置: 首页 > news >正文

vue中操作dom,实现元素的拖拉拽

使用原生的操作DOM的方式,实现元素的拖拉拽功能。默认将元素绝对定位到左上角位置left为0,top为0。监听元素的移动,只需要知道元素的左上角x和y位置即可,元素的x和y的偏移量就是元素重新进行定位的left和top的数据。
getBoundingClientRect() 是 DOM 元素的一个方法,它返回一个 DOMRect 对象,提供了元素的大小及其相对于视口(viewport)的位置信息。
具体代码:

<template><divref="draggable"class="draggable-box"@mousedown="startDrag">拖拽我 (自定义实现)</div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'const draggable = ref(null)
let isDragging = false; // 是否拖动
let offsetX = 0
let offsetY = 0const startDrag = (e) => {isDragging = true// 计算鼠标相对于元素左上角的偏移// getBoundingClientRect() 是 DOM 元素的一个方法,它返回一个 DOMRect 对象,提供了元素的大小及其相对于视口(viewport)的位置信息。const rect = draggable.value.getBoundingClientRect();// console.log(`元素距离视口左侧: ${rect.left}px`);// console.log(`元素距离视口顶部: ${rect.top}px`);offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top// 添加样式draggable.value.style.cursor = 'grabbing'draggable.value.style.userSelect = 'none'// 阻止默认行为防止文本选中e.preventDefault()
}const onMouseMove = (e) => {if (!isDragging) return// 计算新位置const x = e.clientX - offsetXconst y = e.clientY - offsetY// 应用新位置draggable.value.style.left = `${x}px`draggable.value.style.top = `${y}px`
}const stopDrag = () => {isDragging = falseif (draggable.value) {draggable.value.style.cursor = 'grab'draggable.value.style.userSelect = ''}
}onMounted(() => {// 初始位置draggable.value.style.position = 'absolute'draggable.value.style.left = '0px'draggable.value.style.top = '0px'// 添加事件监听document.addEventListener('mousemove', onMouseMove)document.addEventListener('mouseup', stopDrag)
})onUnmounted(() => {// 移除事件监听document.removeEventListener('mousemove', onMouseMove)document.removeEventListener('mouseup', stopDrag)
})
</script><style>
.draggable-box {width: 100px;height: 100px;background-color: #e74c3c;color: white;display: flex;justify-content: center;align-items: center;cursor: grab;user-select: none;
}
</style>
http://www.dtcms.com/a/178214.html

相关文章:

  • Linux系统管理与编程15:vscode与Linux连接进行shell开发
  • 1688代采系统:技术架构与应用实践
  • iOS 模块化开发流程
  • Axios替代品Alova
  • 【计算机网络】用户从输入网址到网页显示,期间发生了什么?
  • RPC、gRPC和HTTP的区别
  • 树状数组的操作问题--Python
  • 使用 Cesium 构建 3D 地图应用的实践
  • Spark 之 metrics
  • 洛谷 P3811:【模板】模意义下的乘法逆元
  • 可撤销并查集,原理分析,题目练习
  • STM32 ADC
  • 数据结构 - 8( AVL 树和红黑树 10000 字详解 )
  • Android学习总结之kotlin协程面试篇
  • PowerShell 复制源文件夹中的所有文件和子文件夹到目
  • 机器学习 数据集
  • OpenCV 基于生物视觉模型的工具------模拟人眼视网膜的生物视觉机制类cv::bioinspired::Retina
  • 表达式求值(算法题)
  • Linux 常用命令 - tftp【简单文件传输协议】
  • 穿越“协议迷雾”:Modbus转Profinet与60LB伺服的传奇相遇
  • Hadoop MapReduce 图文代码讲解
  • 功能安全的关键——MCU锁步核技术全解析(含真实应用方案)
  • 什么是多模态大模型?为什么需要多模态大模型?
  • JAVA:Spring Boot 集成 Lua 的技术博客
  • IDEA 2024 版本配置热部署
  • SSM 框架是指什么,其优缺点,怎样用到在你的程序里
  • 图形渲染+事件处理最终版
  • KRaft (Kafka 4.0) 集群配置指南(超简单,脱离 ZooKeeper 集群)还包含了简化测试指令的脚本!!!
  • 线性回归算法介绍和代码例程
  • uniapp 微信小程序使用图表