快捷導(dǎo)航

Vue實(shí)現(xiàn)拖拽改變列表順序詳解

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

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

當(dāng)我們構(gòu)建前端應(yīng)用時(shí)，有時(shí)需要實(shí)現(xiàn)一些交互性強(qiáng)的功能，比如拖拽改變列表順序。在本文中，我將演示如何使用 Vue.js 實(shí)現(xiàn)這樣一個(gè)功能。

首先，我們需要一個(gè)基本的 Vue 組件結(jié)構(gòu)，包括 HTML 模板、JavaScript 邏輯和 CSS 樣式。我們將在 Vue 組件中實(shí)現(xiàn)拖拽改變列表順序的功能。

<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)
// 當(dāng)前被拖拽的元素
const sourceNode = ref(null)

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

const dragenter = (e) => {
  // 阻止瀏覽器默認(rèn)行為，否則放手時(shí)會(huì)回到原位
  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)
  // 插入到對應(yīng)位置
  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>

以上是完整的代碼。現(xiàn)在讓我們逐步解釋這段代碼是如何工作的。

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