Vue 3实现元素拖拽至列表内指定位置的问题

要实现卡片拖拽到列表的任意位置（顶部、元素之间），需要修改拖拽事件的处理逻辑，从仅支持列表末尾插入，改为计算插入位置后精准插入。以下是具体修改步骤：

一、模板部分修改 #

1. 给卡片列表容器（DraggableArea）添加拖拽悬停事件，处理空白区域的插入逻辑：

<div class="py-3 px-3 bg-netural2 overflow-y-auto"
     :style='dragableAreaHeight'
     @dragover="onListDragOver($event, lists.id)"
>

2. 给每个Task组件添加拖拽悬停和放置事件，传入当前卡片的索引，同时补充:key保证列表渲染稳定性：

<Task v-for="(item, index) in lists.cards"
      :key="item.id"
      :draggable="true"
      @dragover.prevent="onTaskDragOver($event, index, lists.id)"
      @drop="onTaskDrop($event, lists.id, index)"
      @dragstart="onDrag( $event, item )" 
      :cardData="item"
/>

二、脚本部分修改 #

1. 在data中新增变量存储插入位置：

data() {
    return {
        // ... 原有变量
        insertIndex: -1, // -1表示插入到列表末尾
    }
}

2. 完善onDrag函数，规范拖拽数据传递：

onDrag: function ( event, item ) {
    this.currentCard = item;
    // 传递卡片ID，符合HTML5拖拽API规范
    event.dataTransfer.setData('text/plain', item.id);
},

3. 新增列表空白区域的拖拽悬停处理：

onListDragOver: function(event, listID) {
    event.preventDefault();
    // 拖拽到空白区域时，设置插入位置为末尾
    this.insertIndex = -1;
},

4. 新增Task元素上的拖拽悬停处理，计算插入位置：

onTaskDragOver: function(event, index, listID) {
    event.preventDefault();
    // 设置插入位置为当前卡片的索引（插入到该卡片前面）
    // 若需更精细的上下半区判断，可通过event.clientY结合元素位置计算，这里简化处理
    this.insertIndex = index;
},

5. 新增Task元素上的放置事件：

onTaskDrop: function(event, listID, index) {
    event.preventDefault();
    this.insertIndex = index;
    this.updateCardList(listID);
},

6. 修改原有的onDrop函数（列表容器的放置事件）：

onDrop: function ( event, listID ){
    event.preventDefault();
    this.updateCardList( listID );
},

7. 修改updateCardList函数，根据插入位置精准插入卡片：

updateCardList( newListID ) {
    const _this = this;
    const currentCard = _this.currentCard;

    // 找到原列表和目标列表
    let sourceList = _this.board.lists.find(list => 
        list.cards?.some(card => card.id === currentCard.id)
    );
    let targetList = _this.board.lists.find(list => list.id === newListID);

    if (!sourceList || !targetList) return;

    // 从原列表移除卡片
    const sourceIndex = sourceList.cards.findIndex(card => card.id === currentCard.id);
    if (sourceIndex !== -1) {
        sourceList.cards.splice(sourceIndex, 1);
    }

    // 处理目标列表的插入逻辑
    if (!targetList.cards) {
        targetList.cards = [];
    }

    if (_this.insertIndex === -1 || _this.insertIndex >= targetList.cards.length) {
        // 插入到末尾
        targetList.cards.push(currentCard);
    } else {
        // 插入到指定位置
        targetList.cards.splice(_this.insertIndex, 0, currentCard);
    }

    // 更新卡片所属列表ID
    currentCard.listID = newListID;
    // 重置插入位置
    _this.insertIndex = -1;
}

三、可选优化：添加拖拽视觉提示 #

可以在样式中添加拖拽时的插入线效果，提升用户体验。例如在Task组件的样式中添加：

.task.drag-over {
    border-top: 2px solid #2196F3;
}

然后在onTaskDragOver时给当前Task添加类名，拖拽离开时移除，具体实现可结合Task组件内部逻辑或父组件状态传递完成。

内容的提问来源于stack exchange，提问作者Jtrom2021