vue2 中做dom拖拽操作
时间: 2023-09-23 20:07:40 浏览: 41
在 Vue2 中做 DOM 拖拽操作,可以通过以下步骤实现:
1. 给需要拖拽的元素设置 `draggable` 属性为 `true`,表示该元素可以被拖动。
2. 给元素绑定 `dragstart` 事件,该事件在开始拖动时触发,可以在该事件中设置被拖动元素的数据和样式。
3. 给目标元素绑定 `dragover` 事件,该事件在被拖动元素经过目标元素时触发,可以在该事件中设置目标元素的样式。
4. 给目标元素绑定 `drop` 事件,该事件在被拖动元素放置在目标元素上时触发,可以在该事件中处理放置操作。
5. 给目标元素绑定 `dragend` 事件,该事件在拖动结束时触发,可以在该事件中重置样式等操作。
下面是一个示例代码:
```
<template>
<div class="container">
<div class="box" draggable @dragstart="dragStart">拖动我</div>
<div class="target" @dragover.prevent @drop="drop">放置在这里</div>
</div>
</template>
<script>
export default {
methods: {
dragStart(event) {
// 设置被拖动元素的数据和样式
event.dataTransfer.setData('text', event.target.innerText);
event.target.style.opacity = 0.5;
},
drop(event) {
// 处理放置操作
const text = event.dataTransfer.getData('text');
event.target.innerText = text;
event.target.style.background = '#eee';
}
}
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 100px;
height: 100px;
background: #f00;
color: #fff;
text-align: center;
line-height: 100px;
}
.target {
width: 200px;
height: 200px;
background: #eee;
color: #333;
text-align: center;
line-height: 200px;
}
</style>
```
在以上代码中,我们给红色的方块设置了 `draggable` 属性,绑定了 `dragstart` 事件,在该事件中设置了被拖动元素的数据和样式;给灰色的方块绑定了 `dragover` 和 `drop` 事件,在 `dragover` 事件中设置了目标元素的样式,在 `drop` 事件中处理放置操作;最后,在 `dragend` 事件中重置被拖动元素的样式。