vue3实现元素拖拽移动功能

发布时间:2024年01月19日

一、效果如下:

二、思路和步骤:

整体思路是在鼠标按下时计算初始偏移值,并在拖拽过程中更新 div 元素的位置,通过事件监听器实现拖拽效果。

(1)用户点击触发拖拽:

当用户点击可拖拽的 div 元素时,通过 mousedown 事件触发 startDrag 函数。

(2)初始化变量:

startDrag 函数初始化一些变量,包括水平和垂直方向上的偏移值,以及拖拽状态。

(3)引入倍率调整偏移值:

在鼠标按下瞬间,通过计算初始偏移值时引入了一个倍率 offsetMultiplier,用于调整 div 与鼠标的距离。通过调整这个常量,可以控制 div 距离鼠标的远近。

(4)添加事件监听器:

函数添加移动事件和鼠标松开事件的监听器,以便在拖拽过程中实时更新 div 的位置。

(5)移动事件处理:

在移动事件处理函数 moveHandler 中,计算新的位置,并在检查新位置是否在视口内后,更新 div 元素的 left 和 top 样式,实现拖拽效果。

(6)边界检查:

为了确保拖拽过程中不会超出视口范围,进行了边界检查。

(7)鼠标松开处理:

鼠标松开事件处理函数 upHandler 主要用于在鼠标松开时停止拖拽,将拖拽状态重置,并移除事件监听器。

(8)模板中绑定事件:

在模板中绑定 mousedown 事件,实现了在点击 div 元素时触发拖拽效果。

(9)样式定义:

在样式中,定义了 div 的基本样式,包括绝对定位、鼠标样式等。

三、源码如下:

<template>
    <div class="drag_wrap">
        <p>分页组件实现拖拽功能</p>
        <!-- 可拖拽的 div -->
        <div ref="draggableDiv" class="draggable" @mousedown="startDrag">
            <el-pagination layout="prev, pager, next" :total="50" />
        </div>
    </div>
</template>
<script setup>
// 初始化可拖拽的 div 的引用
const draggableDiv = ref(null);
// 处理开始拖拽的函数
const startDrag = (event) => {
    // 初始化偏移值和拖拽状态
    let offsetX, offsetY, isDragging = false;
    // 偏移值的倍率,用于调整 div 与鼠标的距离
    const offsetMultiplier = -1.2; // 调整这个常量以改变偏移量
    //offsetMultiplier 是一个常量,你可以根据需要调整它的值。增大这个常量会使 div 更靠近鼠标,而减小它会让 div 离鼠标更远,根据实际情况进行调整
    // 计算初始偏移值
    offsetX = event.clientX - draggableDiv.value.getBoundingClientRect().left - draggableDiv.value.clientWidth * offsetMultiplier;
    offsetY = event.clientY - draggableDiv.value.getBoundingClientRect().top - draggableDiv.value.clientHeight * offsetMultiplier;
    // 处理移动事件的函数
    const moveHandler = (e) => {
        if (!isDragging) return;
        // 计算新的位置
        const x = e.clientX - offsetX;
        const y = e.clientY - offsetY;
        // 检查新位置是否在视口内
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        if (x >= 0 && x + draggableDiv.value.clientWidth <= viewportWidth) {
            draggableDiv.value.style.left = `${x}px`;
        }
        if (y >= 0 && y + draggableDiv.value.clientHeight <= viewportHeight) {
            draggableDiv.value.style.top = `${y}px`;
        }
    };
    // 处理鼠标松开事件的函数
    const upHandler = () => {
        isDragging = false;
        draggableDiv.value.style.cursor = 'grab';
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
    };
     // 设置拖拽状态和鼠标样式 将拖拽状态重置
    isDragging = true;
    draggableDiv.value.style.cursor = 'grabbing';
    // 监听移动和松开事件
    document.addEventListener('mousemove', moveHandler);
    document.addEventListener('mouseup', upHandler);
};
</script>
  
<style lang="scss" scoped>
.drag_wrap {
    padding: 50px;
    .draggable {
        position: absolute;
        cursor: grab;
        user-select: none;
        background-image: linear-gradient(25deg, #8e84cf, #8f9cb9, #8ab3a2, #7fca89);
        color: #fff;
        padding: 10px;
        :deep(.el-pager li ) {
            margin-right: 10px;
        }
        :deep(.el-pagination>.is-first) {
            margin-right: 10px;
        }
    }
}
</style>

文章来源:https://blog.csdn.net/ZHENGCHUNJUN/article/details/135112139
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。