鼠标拖拽 dom 元素(vue2 版)（uipath鼠标拖动）

往往很多刚入行的小伙伴们在碰到拖拽需求的时候可能会一头雾水，不知道如何下手，下面给大家写了一套基于 vue2 开发的拖拽功能，希望能给刚入行的小伙伴们一点帮助。

废话不多说，上代码：

<template>

<div>

<span @mousedown="handleMousedown">拖拽</span>

</div>

</template>

<script>

export default {

data() {

return {}

},

methods: {

// 鼠标按下事件

handleMousedown(e) {

// 鼠标按下后逻辑

......

// 同时监听鼠标移动事件

document.body.addEventListener('mousemove', this.handleMousemove)

},

// 鼠标移动

handleMousemove(e) {

// 鼠标移动逻辑

......

},

// 监听鼠标松开事件

handleMouseup(e) {

// 鼠标松开后执行相关逻辑

......

// 同时将鼠标移动事件监听销毁

document.body.removeEventListener('mousemove', this.handleMousemove)

},

},

mounted() {

// 初始化监听鼠标松开

document.body.addEventListener('mouseup', this.handleMouseup)

},

}

<script>