###
Vue 中
拖拽组件的实现或使用方法
在
Vue 框架中，可以使用第三方库 `
vuedraggable` 或者通过原生事件监听结合样式绑定来实现
拖拽功能。以下是两种常见的实现方式。
#### 1. 使用
vuedraggable 实现列表项
拖拽
`
vuedraggable` 是一个基于 `Sortable.js` 的
Vue 组件，用于实现列表项的
拖拽排序功能。以下是一个简单的示例：
```
vue
<template>
<div>
<draggable v-model="list" class="list-group" group="people" @start="drag=true" @end="drag=false" item-key="id">
<template #item="{ element }">
<div class="list-group-item">
{{ element.name }}
</div>
</template>
</draggable>
</div>
</template>
<script>
import draggable from '
vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
list: [
{ name: 'Item 1', id: 1 },
{ name: 'Item 2', id: 2 },
{ name: 'Item 3', id: 3 },
],
drag: false,
};
},
};
</script>
<style scoped>
.list-group {
display: flex;
flex-direction: column;
}
.list-group-item {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
cursor: move;
}
</style>
```
上述代码展示了如何使用 `
vuedraggable` 来实现一个可
拖拽的列表[^1]。通过 `v-model` 将数据与
组件绑定，并通过 `@start` 和 `@end` 事件监听
拖拽状态。
#### 2. 使用原生事件监听实现自定义
组件拖拽
如果需要实现更复杂的
拖拽效果（例如自由拖动一个
组件），可以通过监听 `mousedown`、`mousemove` 和 `mouseup` 事件来实现。以下是一个示例：
```
vue
<template>
<div
class="left-admin"
@mousedown="startDrag"
:style="{ left: panelPosition.x + 'px', top: panelPosition.y + 'px' }"
>
拖拽我
</div>
</template>
<script>
export default {
data() {
return {
panelPosition: { x: 0, y: 0 }, // 初始位置
isDragging: false, // 是否正在
拖拽
mouseOffset: { x: 0, y: 0 }, // 鼠标相对于元素的位置偏移
};
},
methods: {
startDrag(event) {
this.isDragging = true;
this.mouseOffset = {
x: event.clientX - this.panelPosition.x,
y: event.clientY - this.panelPosition.y,
};
document.addEventListener('mousemove', this.onDrag);
document.addEventListener('mouseup', this.stopDrag);
},
onDrag(event) {
if (this.isDragging) {
this.panelPosition = {
x: event.clientX - this.mouseOffset.x,
y: event.clientY - this.mouseOffset.y,
};
}
},
stopDrag() {
this.isDragging = false;
document.removeEventListener('mousemove', this.onDrag);
document.removeEventListener('mouseup', this.stopDrag);
},
},
};
</script>
<style scoped>
.left-admin {
position: fixed;
width: 100px;
height: 100px;
background-color: lightblue;
cursor: move;
text-align: center;
line-height: 100px;
}
</style>
```
上述代码展示了如何通过监听鼠标事件来实现一个自由拖动的
组件[^2]。通过动态绑定 `left` 和 `top` 样式属性，可以实时更新
组件的位置。
---
###
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
