前言

添加拖放功能是使你的程序更加自然和友好的方法。盡管有一些提供拖放功能的庫(kù)，但是了解它們?cè)诘讓拥墓ぷ髟硎欠浅Ｓ幸饬x的。

在本文中，我們將用內(nèi)置的 HTML 拖放 API 來(lái)實(shí)現(xiàn)簡(jiǎn)單的拖放系統(tǒng)。像這樣：

拖放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：開(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)建計(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)。

添加拖放功能

首先在腳本中添加一些方法：一種在開(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>

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

讓我們給它一個(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
>

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

總結(jié)

盡管這個(gè)例子非常簡(jiǎn)單，但可以幫你很好地了解 HTML 拖放 API 的工作原理。實(shí)際上它并不像你所想象的那么難。

到此這篇關(guān)于如何利用vue.js實(shí)現(xiàn)拖放功能的文章就介紹到這了,更多相關(guān)vue.js拖放功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論