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>