使用vue.js怎么實(shí)現(xiàn)拖放功能

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用vue.js怎么實(shí)現(xiàn)拖放功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

拖放API

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

1. 可拖動(dòng)元素：可以被拖動(dòng)的元素

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

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

拖放事件

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

• drag：可拖動(dòng)的項(xiàng)目被拖動(dòng)

• dragstart：開始拖動(dòng)可拖動(dòng)元素

• dragend：拖動(dòng)結(jié)束（例如放開鼠標(biāo)）

• dragenter ：拖動(dòng)的項(xiàng)目進(jìn)入可放置元素

• dragleave –可拖動(dòng)的項(xiàng)目離開可放置元素

• 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è)陂_始拖動(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)

如你所見例子中有兩個(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)建計(jì)算屬性比在 v-for 中使用 v-if 更好。

創(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)。

添加拖放功能

首先在腳本中添加一些方法：一種在開始拖動(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)開始事件。

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

由于添加了 draggable 屬性，所以，如果你運(yùn)行程序，應(yīng)該可以像這樣拖動(dòng)元素，但是無(wú)法將其拖放到任何地方。

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

<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
>

現(xiàn)在運(yùn)行程序，可以看到一切正常。我們能夠在兩個(gè)不同的列表之間拖放元素。

上述就是小編為大家分享的使用vue.js怎么實(shí)現(xiàn)拖放功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。