前言

添加拖放功能是使你的程序更加自然和友好的方法。盡管有一些提供拖放功能的庫，但是了解它們在底層的工作原理是非常有意義的。

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

拖放API

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

1. 可拖動元素：可以被拖動的元素
2. 可放置元素：可以接受被拖動元素的元素
   

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

拖放事件

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

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

dataTransfer對象

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

dataTransfer 對象允許我們在開始拖動元素時設(shè)置數(shù)據(jù)，并在將元素放在拖放區(qū)中時訪問相同的數(shù)據(jù)。

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

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

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

如你所見例子中有兩個列表，我們可以在它們之間順暢地拖放項目。

配置我們的項目

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

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

我決定在這個數(shù)組中添加三項：

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)建了兩個計算屬性用來把項目列表過濾為列表1中的項目和列表2中的項目。

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

創(chuàng)建計算屬性比在 v-for 中使用 v-if 更好。

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

這是組件的輪廓。該代碼將顯示所有內(nè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>

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

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

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

通過在拖放區(qū)樣式中添加一些填充來實現(xiàn)。

添加拖放功能

首先在腳本中添加一些方法：一種在開始拖動元素時使用，另一種在拖放元素時使用。

對于 startDrag 方法，我們想使用前面討論的 dataTransfer 屬性存儲要拖動的元素的 ID。另外這個拖動事件將是一個動作。

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

然后在 ondrop 中檢索存儲的 ID，以便我們可以訪問數(shù)組中正確的項目。

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

下面添加模板代碼。

首先向事件添加事件。需要使元素可拖動并檢測拖動開始事件。

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

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

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

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

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

因為在默認情況下，這兩種方法不允許刪除元素。所以為了使我們的 drop 事件能夠正常運行，必須阻止其默認操作才行。

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

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

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

總結(jié)

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

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

最新評論