vue3 写一个拖动组件

好的，下面是如何在 Vue 3 中写一个拖动组件的基本步骤。

1. 使用 Vue 3 的 Composition API 来创建组件。

2. 为拖动元素添加 mousedown 事件监听器，并在事件处理函数中记录鼠标的初始位置。

3. 在 document 上添加 mousemove 和 mouseup 事件监听器，在这些事件处理函数中计算鼠标的位移并更新拖动元素的位置。

4. 使用 CSS transform 来实现拖动元素的位移。

示例代码如下：

<template><div ref="draggable" @mousedown="handleMouseDown">拖动我div>
template><script>
import { ref, onMounted } from 'vue';export default {setup() {const draggableElement = ref(null);let isDragging = false;let currentX;let currentY;let initialX;let initialY;let xOffset = 0;let yOffset = 0;const handleMouseDown = (event) => {initialX = event.clientX - xOffset;initialY = event.clientY - yOffset;if (event.target === draggableElement.value) {isDragging = true;}};const handleMouseUp = (event) => {initialX = currentX;initialY = currentY;isDragging = false;};const handleMouseMove = (event) => {if (isDragging) {event.preventDefault();currentX = event.clientX - initialX;currentY = event.clientY - initialY;xOffset = currentX;yOffset = currentY;setTranslate(currentX, currentY);}};const setTranslate = (xPos, yPos) => {draggableElement.value.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;};onMounted(() => {document.addEventListener("mousemove", handleMouseMove);document.addEventListener("mouseup", handleMouseUp);});return {draggableElement,handleMouseDown};}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！