Vue實現拖拽改變列表順序詳解

更新時間：2024年04月20日 10:19:15 作者：MerkleJqueryRu

這篇文章主要為大家詳細介紹了Vue實現拖拽改變列表順序的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

當我們構建前端應用時，有時需要實現一些交互性強的功能，比如拖拽改變列表順序。在本文中，我將演示如何使用 Vue.js 實現這樣一個功能。

首先，我們需要一個基本的 Vue 組件結構，包括 HTML 模板、JavaScript 邏輯和 CSS 樣式。我們將在 Vue 組件中實現拖拽改變列表順序的功能。

<template>
  <div ref="list" 
    :ondragstart="dragstart"
    :ondragenter="dragenter"
    :ondragend="dragend"
    class="list">
    <div draggable="true" class="item" v-for="i in 10">{{ i }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 被拖拽的父元素
const list = ref(null)
// 當前被拖拽的元素
const sourceNode = ref(null)

// 拖拽開始事件
const dragstart = (e) => {
  setTimeout(() => {
    // 需要異步 不然元素直接消失
    sourceNode.value = e.target
    e.target.classList.add('moving')
  }, 0)
}

const dragenter = (e) => {
  // 阻止瀏覽器默認行為，否則放手時會回到原位
  e.preventDefault()
  if(e.target === list.value || e.target === sourceNode.value) {
    // 如果是在父元素上，或在自身元素上，不做任何處理
    return;
  }
  const children = [... list.value.children]
  const sourceIndex = children.indexOf(sourceNode.value)
  const targetIndex = children.indexOf(e.target)
  // 插入到對應位置
  if(sourceIndex < targetIndex) {
    list.value.insertBefore(sourceNode.value, e.target.nextElementSilbling)
  }else {
    list.value.insertBefore(sourceNode.value, e.target)    
  }
}

const dragend = (e) => {
  e.target.classList.remove('moving')
}
</script>

<style scoped>
.box {
  height: 80vw;
}
.item {
  height: 40px;
  background-color: antiquewhite;
  margin: 10px;
  cursor: pointer;
}

.item.moving {
  background: #ccc;
  color: transparent;
  border: 1px dashed #ccc;
}
</style>

以上是完整的代碼?，F在讓我們逐步解釋這段代碼是如何工作的。

<template> 部分包含了我們的 HTML 結構。我們有一個包含一些可拖拽元素的容器，每個元素都有一個拖拽事件。
<script setup> 部分是 Vue.js 3 的新特性，用于編寫組件的邏輯。在這里，我們引入了 ref 函數，用來創(chuàng)建響應式數據。我們創(chuàng)建了兩個 ref，一個用于跟蹤被拖拽的父元素，另一個用于跟蹤當前被拖拽的元素。然后我們定義了三個函數，分別處理拖拽開始、拖拽進入和拖拽結束事件。
在 dragstart 函數中，我們設置了一個異步定時器，以確保獲取到正確的被拖拽元素。然后我們給被拖拽的元素添加一個 moving 類，用于在拖拽時改變其樣式。
dragenter 函數處理拖拽進入事件。我們首先阻止了瀏覽器的默認行為，然后判斷當前拖拽的目標元素是否是列表容器本身或者是拖拽元素本身，如果是則不進行任何處理。接著，我們獲取了列表容器中所有子元素，并計算出被拖拽元素和目標元素的索引，然后根據這些索引將被拖拽元素插入到正確的位置。
dragend 函數在拖拽結束時移除了被拖拽元素的 moving 類，恢復其原始樣式。
最后，<style scoped> 部分包含了組件的 CSS 樣式，包括列表容器和拖拽元素的樣式定義。