Vue 拖拽页面
时间: 2023-08-16 21:24:17 浏览: 45
实现 Vue 拖拽页面的方法有多种,以下是其中一种基本实现方式:
1. 在 Vue 组件中定义一个 data 对象,用来存储拖拽元素的位置信息:
```
data () {
return {
left: 0,
top: 0,
isDragging: false,
startX: 0,
startY: 0
}
}
```
2. 在模板中使用绑定指令将元素的位置与 data 中的属性绑定:
```
<template>
<div
class="drag-item"
:style="{ left: left + 'px', top: top + 'px' }"
@mousedown="startDrag"
@mousemove="dragging"
@mouseup="endDrag"
>
// 元素内容
</div>
</template>
```
3. 在组件中定义 startDrag、dragging、endDrag 三个方法,实现拖拽功能:
```
methods: {
startDrag (event) {
this.isDragging = true
this.startX = event.clientX
this.startY = event.clientY
},
dragging (event) {
if (!this.isDragging) return
const offsetX = event.clientX - this.startX
const offsetY = event.clientY - this.startY
this.left += offsetX
this.top += offsetY
this.startX = event.clientX
this.startY = event.clientY
},
endDrag () {
this.isDragging = false
}
}
```
以上是一个基本的拖拽实现方式,你可以根据自己的需求进行修改和扩展。