Vue 拖拽實現(xiàn)及問題備忘

https://segmentfault.com/a/1190000013606983

1. 拖拽樣式

如下圖牢撼，我們想實現(xiàn)的效果為：

當(dāng)方塊從上方灰塊被拖拽到下方時秃臣，下方灰塊中會出現(xiàn)該方塊磨隘。

<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. 拖拽相關(guān)事件

為了讓 DOM 元素可以拖拽，我們需要為元素增加 draggable="true"

<div class="item"
     draggable="true"
     v-for="(item, index) in items" :key="index"
>
    {{ item.label }}
</div>

2.1 拖拽事件介紹

@dragstart：拖拽開始事件，可綁定于被拖拽元素上腺毫；
@dragend：拖拽結(jié)束事件，可綁定于被拖拽元素上挣柬；
@dragover：拖拽持續(xù)移動事件潮酒，建議綁定于可拖放區(qū)域（下方灰色塊）；
@dragenter：進入拖放區(qū)域邪蛔，建議綁定于可拖放區(qū)域（下方灰色塊）澈灼，該事件僅在進入拖放區(qū)域時觸發(fā)，在其內(nèi)部移動時不觸發(fā)店溢，離開某一可拖放區(qū)域后再進入時會再次觸發(fā)叁熔；

2.2 ondrop

拖放事件，綁定于可拖放區(qū)域上床牧。

之所以把這個方法單獨拎出來荣回，是因為在使用該方法時存在一些注意事項。

當(dāng)我們這樣使用時：

<div class="drop-field"
     @drop="drop"
>
    ...
</div>

methods: {
    drop (event) {
        console.log('drop', event)
    }
}

發(fā)現(xiàn)當(dāng)我們將可拖拽元素拖放至此時戈咳，并沒有觸發(fā)事件心软。

根據(jù) 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 事件在其上正確執(zhí)行：

<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 事件，其傳遞的參數(shù)都是 DragEvent踏堡。

讓我很費解的是猎唁，對于在拖放區(qū)綁定的 drop 事件而言，其 DragEvent 中竟然無法找到被拖拽元素顷蟆。

這也就意味著诫隅，不借助額外變量腐魂，drop 事件是無法知道被拖放者是什么的。

但我們?nèi)钥梢越柚?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 在拖放區(qū)的 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: 拖放區(qū)的 drop豁生；
Step3：拖拽對象的 dropend兔毒；

因而，如果在 dragend 中傳遞消息甸箱，是不能被 drop 捕獲的育叁。

2.3.5 注意事項二：不能在被拖拽對象的 dragover 事件中傳遞消息

如果我們在被拖拽對象的 dragover 事件中傳遞消息，由于 dragover 事件的作用對象是「可拖放區(qū)」摇肌，即此時擂红，該 dragover 中的 DragEvent 是以「可拖放區(qū)」身份施加的，故而不會傳遞到 drop 中围小。

2.3.6 注意事項三：消息只能是 String 類型

dataTransfer 中設(shè)置的消息（即 setData 的第二個參數(shù) ）只能是字符串類型昵骤。如果想要傳遞對象，需要先進行序列化肯适。

2.3.7 注意事項四：Vue 中事件參數(shù)

在上面的代碼中变秦，如果我們在 @dragstart 中想傳遞一些參數(shù)，如下：

@dragstart="dragstart(item)"

就會遇到一個問題：默認傳遞的 DragEvent 參數(shù)丟失了框舔。

此時蹦玫，我們需要使用 Vue 的特殊變量來實現(xiàn)事件參數(shù)的傳遞：

@dragstart="dragstart($event, item)"

3. 拖拽實現(xiàn)

結(jié)合以上內(nèi)容，我們的實現(xiàn)思路如下：

[圖片上傳中...(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 項目中刘绣，被拖拽對象和可拖放區(qū)域可能放在不同組件之中樱溉，此時，關(guān)鍵數(shù)據(jù)的傳遞最好借助 Vuex 等數(shù)據(jù)總線實現(xiàn)纬凤。讓數(shù)據(jù)而非 DOM 流轉(zhuǎn)是 Vue 項目的基本思路福贞。