vue3 写一个拖动组件-爱代码爱编程
好的,下面是如何在 Vue 3 中写一个拖动组件的基本步骤。
使用 Vue 3 的 Composition API 来创建组件。
为拖动元素添加
mousedown
事件监听器,并在事件处理函数中记录鼠标的初始位置。在
document
上添加mousemove
和mouseup
事件监听器,在这些事件处理函数中计算鼠标的位移并更新拖动元素的位置。使用 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
};
}