vue拖拽
时间: 2023-07-01 14:29:17 浏览: 57
Vue 拖拽可以通过以下几种方式实现:
1. 使用原生 HTML5 的拖拽 API,可以通过在拖拽元素上绑定 dragstart、dragover、drop 等事件来实现拖拽功能。
2. 使用第三方插件,例如 Vue.Draggable、Vue-Sortable 等,这些插件提供了丰富的拖拽功能,并且使用起来比较方便。
3. 自己实现拖拽功能,可以通过在拖拽元素上绑定 mousedown、mousemove、mouseup 等事件,监听鼠标的操作,并且通过改变拖拽元素的位置来实现拖拽效果。
下面是一个简单的示例,演示如何通过原生 HTML5 的拖拽 API 实现 Vue 拖拽功能:
```html
<template>
<div>
<div class="box" draggable="true" @dragstart="dragStart" @dragend="dragEnd">
拖拽元素
</div>
<div class="container" @dragover.prevent @drop="drop">
容器元素
</div>
</div>
</template>
<script>
export default {
methods: {
dragStart(event) {
event.dataTransfer.setData('text', event.target.id);
},
dragEnd(event) {
event.target.style.opacity = '1';
},
drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
event.target.appendChild(document.getElementById(data));
},
},
};
</script>
<style scoped>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.container {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
```
在上面的示例中,我们使用了 HTML5 的拖拽 API,并且在拖拽元素上绑定了 dragstart 和 dragend 事件,在容器元素上绑定了 dragover 和 drop 事件,通过改变拖拽元素的位置,使其可以被拖拽到容器元素中。