前言

最近在學(xué)習(xí)Vue，邊做個(gè)小demo邊學(xué)習(xí)。其中有一個(gè)小功能需要使用到拖放，順便還學(xué)一下拖放。拖放是HTML5的標(biāo)準(zhǔn)，對(duì)著教程在普通的頁(yè)面上很容易就實(shí)現(xiàn)了，但是vue中基本都是數(shù)據(jù)驅(qū)動(dòng)，不推薦直接操作DOM。

內(nèi)置HTML 拖放API

HTML拖放API 是一種內(nèi)置方法，它包含幾個(gè)事件和屬性，但是可以歸納為以兩種類型的元素為思路來(lái)進(jìn)行處理。

• 可拖動(dòng)元素：可以被拖動(dòng)的元素
• 可放置元素：可以接受被拖動(dòng)元素的元素

如果這樣分析，將會(huì)使分析拖放事件變得更加容易。

拖放事件

API 中有八個(gè)拖放事件可以用在我們程序中。

• drag：可拖動(dòng)的項(xiàng)目被拖動(dòng)
• dragstart：開(kāi)始拖動(dòng)可拖動(dòng)元素
• dragend：拖動(dòng)結(jié)束（例如放開(kāi)鼠標(biāo)）
• dragenter ：拖動(dòng)的項(xiàng)目進(jìn)入可放置元素
• dragleave –可拖動(dòng)的項(xiàng)目離開(kāi)可放置元素
• dragover：可拖動(dòng)項(xiàng)目在可放置元素上移動(dòng)（每一百毫秒左右調(diào)用一次）
• drop：可拖動(dòng)項(xiàng)目被放置在可放置元素上

dataTransfer對(duì)象

關(guān)于拖放 API 最重要的一個(gè)知識(shí)點(diǎn)時(shí)它將 dataTransfer對(duì)象添加到事件中。

dataTransfer 對(duì)象允許我們?cè)陂_(kāi)始拖動(dòng)元素時(shí)設(shè)置數(shù)據(jù)，并在將元素放在拖放區(qū)中時(shí)訪問(wèn)相同的數(shù)據(jù)。

應(yīng)該知道一些關(guān)于 dataTransfer 的屬性和方法（如果要了解更多，請(qǐng)查看dataTransfer API 文檔）。

• dropEffect：當(dāng)前的拖放操作（例如，移動(dòng)，復(fù)制）
• effectAllowed：指定拖放操作
• setData（name，val）：允許我們向dataTransfer對(duì)象添加值
• getData（name）：檢索存儲(chǔ)的值

創(chuàng)建自己的拖放系統(tǒng)

如你所見(jiàn)例子中有兩個(gè)列表，我們可以在它們之間順暢地拖放項(xiàng)目。

配置我們的項(xiàng)目

首先，我們必須設(shè)置數(shù)據(jù)。在腳本中，創(chuàng)建一個(gè) item 對(duì)象數(shù)組，對(duì)象的屬性有：

• id：唯一的 ID，以便我們可以查找對(duì)象
• title：要顯示文字
• list：它所屬的列表。

這個(gè)數(shù)組中添加三項(xiàng)：

data () {
    return {
      items: [
      {
        id: 0,
        title: 'Item A',
        list: 1
      },
      {
        id: 1,
        title: 'Item B',
        list: 1
      },
      {
        id: 2,
        title: 'Item C',
        list: 2
      }]
    }
}

另外還創(chuàng)建了兩個(gè)計(jì)算屬性用來(lái)把項(xiàng)目列表過(guò)濾為列表1中的項(xiàng)目和列表2中的項(xiàng)目。

computed: {
    listOne () {
      return this.items.filter(item => item.list === 1)
    },
    listTwo () {
      return this.items.filter(item => item.list === 2)
    }
}

創(chuàng)建的模板代碼

這是組件的輪廓。該代碼將顯示所有內(nèi)容，但沒(méi)有拖放功能。

<template>
  <div>
    <div class='drop-zone'>
      <div v-for='item in listOne' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
    <div class='drop-zone'>
      <div v-for='item in listTwo' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

組件的樣式并不重要。重要的是，即使沒(méi)有內(nèi)部元素，你的放置區(qū)也必須具有一定的高度，否則，你無(wú)法將鼠標(biāo)懸停在上面！

<style scoped>
  .drop-zone {
    background-color: #eee;
    margin-bottom: 10px;
    padding: 10px;
  }
 
  .drag-el {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;
  }
</style>

通過(guò)在拖放區(qū)樣式中添加一些填充來(lái)實(shí)現(xiàn)。

添加拖放功能

首先在腳本中添加一些方法：一種在開(kāi)始拖動(dòng)元素時(shí)使用，另一種在拖放元素時(shí)使用。

對(duì)于 startDrag 方法，我們想使用前面討論的 dataTransfer 屬性存儲(chǔ)要拖動(dòng)的元素的 ID。另外這個(gè)拖動(dòng)事件將是一個(gè)動(dòng)作。

startDrag: (evt, item) => {
      evt.dataTransfer.dropEffect = 'move'
      evt.dataTransfer.effectAllowed = 'move'
      evt.dataTransfer.setData('itemID', item.id)
}

然后在 ondrop 中檢索存儲(chǔ)的 ID，以便我們可以訪問(wèn)數(shù)組中正確的項(xiàng)目。

onDrop (evt, list) {
      const itemID = evt.dataTransfer.getData('itemID')
      const item = this.items.find(item => item.id == itemID)
      item.list = list
}

下面添加模板代碼。
首先向事件添加事件。需要使元素可拖動(dòng)并檢測(cè)拖動(dòng)開(kāi)始事件。

<div
        class='drag-el'
        v-for='item in listTwo'
        :key='item.title'
        draggable
        @dragstart='startDrag($event, item)'
 >
        {{ item.title }}
</div>

讓我們給它一個(gè)接受可拖動(dòng)元素的放置區(qū)域。先添加調(diào)用 onDrop 方法的 drop 事件偵聽(tīng)器。

<div
      class='drop-zone'
      @drop='onDrop($event, 1)'
>

但是要注意，我們必須在 dragEnter 和 dragOver 這兩個(gè)拖放 hooks 上調(diào)用 preventDefault。

因?yàn)樵谀J(rèn)情況下，這兩種方法不允許刪除元素。所以為了使我們的 drop 事件能夠正常運(yùn)行，必須阻止其默認(rèn)操作才行。

可以用 Vue 內(nèi)置的 .prevent 事件修改器來(lái)完成此操作。

<div
      class='drop-zone'
      @drop='onDrop($event, 1)'
      @dragover.prevent
      @dragenter.prevent
>

最后求點(diǎn)個(gè)贊或者給個(gè)????