Vue 拖拽实现及问题备忘

以下备忘拖拽的简单实现和其中存在的问题，以此为基石可以扩展开发多种拖拽效果。

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. 拖拽实现

结合以上内容，我们的实现思路如下：

代码如下：

<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 项目的基本思路。

参考链接

1. DataTransfer - Web API 接口 | MDN
2. HTML5 drag & drop 拖拽与拖放简介 « 张鑫旭-鑫空间-鑫生活
3. Vue.js里面点击事件传递了参数还能使用事件参数吗？如何使用？ - radical的回答 - SegmentFault 思否
4. DataTransfer.setData() - Web API 接口 | MDN
5. HTML5 Drag and Drop events with Vue | Vue.js Discussion
6. ondrop Event