Vue实现拖拽功能

责编:menVScode 2020-10-13 13:27 阅读(50)

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

原址:https://segmentfault.com/a/1190000013606983

标签: 拖拽 Vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码