Vue3中实现div拖拽功能
作者：zhige@
这篇文章主要介绍了Vue3中实现div拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1.创建一个div
<template>
<div class="draggable" :style="{ left: `${x}px`, top: `${y}px` }" @mousedown="startDrag">
拖拽我
</div>
</template>2.typescript代码
<script setup>
import { ref } from 'vue';
// 用于存储元素X和Y位置的响应性引用
const x = ref(500);
const y = ref(500);
// 是否正在拖动的标志
const isDragging = ref(false);
// 开始拖动的函数
const startDrag = (event) => {
// 记录初始鼠标位置
const initialMouseX = event.clientX;
const initialMouseY = event.clientY;
// 记录初始元素位置
const initialX = x.value;
const initialY = y.value;
// 开始拖动，设置为true
isDragging.value = true;
// 当鼠标移动时执行的函数
const dragging = (moveEvent) => {
// 只有在拖动时才执行
if (isDragging.value) {
// 计算鼠标移动的距离
const deltaX = moveEvent.clientX - initialMouseX;
const deltaY = moveEvent.clientY - initialMouseY;
// 更新元素的位置
x.value = initialX + deltaX;
y.value = initialY + deltaY;
}
};
// 鼠标释放时停止拖动的函数
const stopDrag = () => {
// 结束拖动，设置为false
isDragging.value = false;
// 移除事件监听器
document.removeEventListener('mousemove', dragging);
document.removeEventListener('mouseup', stopDrag);
};
// 添加鼠标移动和释放时的事件监听器
document.addEventListener('mousemove', dragging);
document.addEventListener('mouseup', stopDrag);
};
</script>3.CSS样式
<style>
.draggable {
width: 550px;
height: 550px;
border: 1px solid #000;
position: fixed;
cursor: grab; /* 设置鼠标样式为可抓取状态 */
z-index: 100;
}
</style>到此这篇关于Vue3中实现div拖拽功能的文章就介绍到这了,更多相关Vue3 div拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！