Vue 拖拽实现及问题备忘

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,569评论 4赞 363
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,499评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,271评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,087评论 0赞 209
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,474评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,670评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,911评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,636评论 0赞 202
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,397评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1赞 261
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,418评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,074评论 3赞 237
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0赞 196
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2赞 270