• Vue项目中实现拖拽排序效果-demo

    在Vue3中实现拖拽排序，可以借助一些浏览器自带的API，以及一些Vue3的特性：

    使用<template>标签中的v-for指令渲染出一个列表，每个列表项绑定一个draggable属性，使其能够被拖拽。

    1. <template>
    2.   <ul>
    3.     <li v-for="(item, index) in list" :key="item.id" :draggable="true" @dragstart="dragStart(index)">
    4.       {{ item.title }}
    5.     li>
    6.   ul>
    7. template>

    在

    • 使用@dragenter和@dragover事件处理函数，阻止默认行为，避免无法放置拖拽元素。

    1. <template>
    2.   <ul>
    3.     <li v-for="(item, index) in state.list" :key="item.id" :draggable="true" @dragstart="dragStart(index)" @dragenter.prevent @dragover.prevent>
    4.       {{ item.title }}
    5.     li>
    6.   ul>
    7. template>

    在@dragenter事件处理函数中，获取当前拖拽元素的索引位置，以及目标元素的索引位置。根据两个索引位置的大小关系，判断拖拽元素是否需要往前移动或往后移动，同时更新list数组的顺序。

    1. const dragEnter = (index) => {
    2.   if (state.dragIndex !== null && state.dragIndex !== index) {
    3.     // 计算拖拽元素和目标元素的位置关系
    4.     const dragItem = state.list[state.dragIndex];
    5.     const targetItem = state.list[index];
    6.     const isAfter = state.dragIndex < index;
    7.  
    8.     // 更新列表顺序
    9.     state.list.splice(state.dragIndex, 1);
    10.     state.list.splice(isAfter ? index - 1 : index, 0, dragItem);
    11.     state.dragIndex = isAfter ? index : index - 1;
    12.   }
    13. };

    在