https://segmentfault.com/a/1190000013606983
1. 拖拽样式
如下图，我们想实现的效果为：
当方块从上方灰块被拖拽到下方时，下方灰块中会出现该方块。
<style scoped>
.drag-field,
.drop-field{
height: 10rem;
box-sizing: border-box;
padding: 1rem;
background-color: #eee;
margin-top: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.item{
width: 30%;
height: 3rem;
text-align: center;
line-height: 3rem;
font-size: .9rem;
background-color: royalblue;
color: #eee;
}
.item:hover{
cursor: pointer;
}
</style>
<template>
<div class="hello">
<div class="drag-field">
<div class="item"
v-for="(item, index) in items" :key="index"
>
{{ item.label }}
</div>
</div>
<div class="drop-field">
<div class="item" v-if="droppedItem !== ''">
{{ droppedItem }}
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
export default {
name: '',
data () {
return {
droppedItem: '',
items: [
{
id: 1,
label: '模块一'
},
{
id: 2,
label: '模块二'
},
{
id: 3,
label: '模块三'
}
]
}
}
}
</script>
2. 拖拽相关事件
为了让 DOM 元素可以拖拽，我们需要为元素增加 draggable="true"
<div class="item"
draggable="true"
v-for="(item, index) in items" :key="index"
>
{{ item.label }}
</div>
2.1 拖拽事件介绍
- @dragstart：拖拽开始事件，可绑定于被拖拽元素上；
- @dragend：拖拽结束事件，可绑定于被拖拽元素上；
- @dragover：拖拽持续移动事件，建议绑定于可拖放区域（下方灰色块）；
- @dragenter：进入拖放区域，建议绑定于可拖放区域（下方灰色块），该事件仅在进入拖放区域时触发，在其内部移动时不触发，离开某一可拖放区域后再进入时会再次触发；
2.2 ondrop
拖放事件，绑定于可拖放区域上。
之所以把这个方法单独拎出来，是因为在使用该方法时存在一些注意事项。
当我们这样使用时：
<div class="drop-field"
@drop="drop"
>
...
</div>
methods: {
drop (event) {
console.log('drop', event)
}
}
发现当我们将可拖拽元素拖放至此时，并没有触发事件。
根据 MDN 的文档：
A listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped. Most areas of a web page or application are not valid places to drop data. Thus, the default handling for these events is to not allow a drop.", hence the only way for the drop event to be fired is to first cancel the dragenter or dragover event.
我们必须阻止某一 DOM 元素对 dragover 的默认行为，才能使 drop 事件在其上正确执行：
<div class="drop-field"
@drop="drop"
@dragover="dragover"
>
...
</div>
methods: {
drop (event) {
console.log('drop', event)
},
dragover (event) {
event.preventDefault()
}
}
在 Vue 中，我们可以将组织默认行为的过程简写如下：
@dragover="dragover"
# 改为：
@dragover.prevent
2.3 DragEvent
注意，无论是 dragxxx 或 drop 事件，其传递的参数都是 DragEvent。
让我很费解的是，对于在拖放区绑定的 drop 事件而言，其 DragEvent 中竟然无法找到被拖拽元素。
这也就意味着，不借助额外变量，drop 事件是无法知道被拖放者是什么的。
但我们仍可以借助 DragEvent 中的 DataTransfer 来进行被拖放对象的消息传递。
流程如下：
2.3.1 在被拖拽对象的 dropstart 事件中传递消息
<div class="item"
draggable="true"
@dragstart="dragstart"
v-for="(item, index) in items" :key="index"
>
{{ item.label }}
</div>
dragstart (event) {
console.log('dragstart', event)
event.dataTransfer.setData('my-info', 'hello')
event.dataTransfer.setData('my-extra-info', 'world')
}
2.3.2 在拖放区的 drop 事件中获取消息
<div class="drop-field"
@drop="drop"
@dragover.prevent
>
<div class="item"
v-if="droppedItem !== ''">
{{ droppedItem }}
</div>
</div>
drop (event) {
console.log('drop', event)
console.log(event.dataTransfer.getData('my-info'))
console.log(event.dataTransfer.getData('my-extra-info'))
}
2.3.3 在被拖拽对象的 dragend 事件中清除消息
<div class="item"
draggable="true"
@dragstart="dragstart"
@dragend="dragend"
v-for="(item, index) in items" :key="index"
>
{{ item.label }}
</div>
dragend (event) {
console.log('dragend', event);
event.dataTransfer.clearData()
}
2.3.4 注意事项一：不能在被拖拽对象的 dragend 事件中传递消息
在整个拖拽过程中，事件的先后顺序为：
Step1: 拖拽对象的 dropstart；
Step2: 拖放区的 drop；
Step3：拖拽对象的 dropend；
因而，如果在 dragend 中传递消息，是不能被 drop 捕获的。
2.3.5 注意事项二：不能在被拖拽对象的 dragover 事件中传递消息
如果我们在被拖拽对象的 dragover 事件中传递消息，由于 dragover 事件的作用对象是「可拖放区」，即此时，该 dragover 中的 DragEvent 是以「可拖放区」身份施加的，故而不会传递到 drop 中。
2.3.6 注意事项三：消息只能是 String 类型
dataTransfer 中设置的消息（ 即 setData 的第二个参数 ）只能是字符串类型。如果想要传递对象，需要先进行序列化。
2.3.7 注意事项四：Vue 中事件参数
在上面的代码中，如果我们在 @dragstart 中想传递一些参数，如下：
@dragstart="dragstart(item)"
就会遇到一个问题：默认传递的 DragEvent 参数丢失了。
此时，我们需要使用 Vue 的特殊变量来实现事件参数的传递：
@dragstart="dragstart($event, item)"
3. 拖拽实现
结合以上内容，我们的实现思路如下：
[图片上传中...(image-b617f0-1555489491984-0)]
代码如下：
<div class="item"
draggable="true"
@dragstart="dragstart($event, item)"
@dragend="dragend"
v-for="(item, index) in items" :key="index"
>
{{ item.label }}
</div>
<div class="drop-field"
@drop="drop"
@dragover.prevent
>
<div class="item"
v-if="droppedItem !== ''">
{{ droppedItem }}
</div>
</div>
methods: {
drop (event) {
this.droppedItem = event.dataTransfer.getData('item')
},
dragstart (event, item) {
event.dataTransfer.setData('item', item.label)
},
dragend (event) {
event.dataTransfer.clearData()
}
}
在 Vue 项目中，被拖拽对象和可拖放区域可能放在不同组件之中，此时，关键数据的传递最好借助 Vuex 等数据总线实现。让数据而非 DOM 流转是 Vue 项目的基本思路。
网友评论