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>

以上是完整的代码。现在让我们逐步解释这段代码是如何工作的。

1. <template> 部分包含了我们的 HTML 结构。我们有一个包含一些可拖拽元素的容器，每个元素都有一个拖拽事件。
2. <script setup> 部分是 Vue.js 3 的新特性，用于编写组件的逻辑。在这里，我们引入了 ref 函数，用来创建响应式数据。我们创建了两个 ref，一个用于跟踪被拖拽的父元素，另一个用于跟踪当前被拖拽的元素。然后我们定义了三个函数，分别处理拖拽开始、拖拽进入和拖拽结束事件。
3. 在 dragstart 函数中，我们设置了一个异步定时器，以确保获取到正确的被拖拽元素。然后我们给被拖拽的元素添加一个 moving 类，用于在拖拽时改变其样式。
4. dragenter 函数处理拖拽进入事件。我们首先阻止了浏览器的默认行为，然后判断当前拖拽的目标元素是否是列表容器本身或者是拖拽元素本身，如果是则不进行任何处理。接着，我们获取了列表容器中所有子元素，并计算出被拖拽元素和目标元素的索引，然后根据这些索引将被拖拽元素插入到正确的位置。
5. dragend 函数在拖拽结束时移除了被拖拽元素的 moving 类，恢复其原始样式。
6. 最后，<style scoped> 部分包含了组件的 CSS 样式，包括列表容器和拖拽元素的样式定义。