Vue Draggable拖拽时如何保持Footer始终位于列表末尾？

核心原因 #

你的问题本质是拖拽区域包含了不可拖拽的Footer元素，Vue Draggable在拖拽过程中的占位逻辑会把Footer当成列表的可交互元素处理，导致拖拽时Footer被临时挤开，直到松开拖拽才恢复。

方案一：布局分离（最稳妥） #

直接把Footer从Draggable的列表容器中剥离，通过Flex布局让Footer固定在列底部，Draggable只负责管理卡片列表：

<template>
  <div class="kanban-column" style="min-height: 100vh; display: flex; flex-direction: column;">
    <!-- 卡片拖拽区域，占满列的剩余高度 -->
    <draggable 
      v-model="columnCards" 
      class="card-list" 
      style="flex: 1; overflow-y: auto; margin-bottom: 1rem;"
      group="kanban"
    >
      <div 
        v-for="card in columnCards" 
        :key="card.id" 
        class="kanban-card"
      >
        {{ card.title }}
      </div>
    </draggable>

    <!-- 固定在列底部的Footer -->
    <div class="column-footer">
      <button @click="addNewCard">添加新卡片</button>
    </div>
  </div>
</template>

这种方式从根源上避免了拖拽逻辑和Footer的冲突，Footer始终固定在列底，完全不受拖拽操作影响。

方案二：在Draggable内部强制Footer始终为最后元素 #

如果必须把Footer放在Draggable内部，通过以下两步处理：

1. 过滤Footer，禁止其被拖拽/作为拖拽目标
   给Footer添加专属类，用filter属性排除它，同时通过move事件阻止拖拽元素被放置到Footer之后：

<template>
  <draggable 
    v-model="columnCards" 
    class="kanban-list"
    group="kanban"
    filter=".non-draggable-footer"
    @move="handleDragMove"
  >
    <div 
      v-for="card in columnCards" 
      :key="card.id" 
      class="kanban-card"
    >
      {{ card.title }}
    </div>
    <!-- Footer元素 -->
    <div class="non-draggable-footer">
      <button @click="addNewCard">添加新卡片</button>
    </div>
  </draggable>
</template>

<script setup>
const handleDragMove = (evt) => {
  const footerEl = evt.to.querySelector('.non-draggable-footer');
  // 禁止拖拽元素被放置到Footer的位置
  if (evt.relatedElement === footerEl) {
    // 强制将拖拽元素插入到列表最后（Footer之前）
    evt.draggedIndex = columnCards.value.length;
    return true;
  }
  return true;
};
</script>

2. 确保Footer渲染在列表末尾
   不要把Footer加入到v-model绑定的columnCards数组中，而是单独放在列表的最后位置，保证它始终是DOM结构的最后一个元素。

注意事项 #

• 方案一的布局分离是首选，代码更简洁，没有额外的事件处理逻辑，兼容性更好。
• 方案二中的move事件处理需要根据你实际的DOM结构调整选择器，确保能准确识别Footer元素。

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