本文收录专栏「一个人用AI做工具矩阵」，关于智枢矩阵表单设计器的技术深潜系列。

二、方案一：原生 HTML5 Drag & Drop

// 拖拽开始，记录源索引
const dragIndex = ref(null)

const handleDragStart = (e, index) => {
  dragIndex.value = index
  e.dataTransfer.effectAllowed = 'move'
}

// 拖拽经过，阻止默认行为允许放置
const handleDragOver = (e) => {
  e.preventDefault()
  e.dataTransfer.dropEffect = 'move'
}

// 放下，交换位置
const handleDrop = (e, dropIndex) => {
  e.preventDefault()
  const from = dragIndex.value
  if (from === null || from === dropIndex) return
  const list = [...props.fields]
  const [moved] = list.splice(from, 1)
  list.splice(dropIndex, 0, moved)
  emit('update:fields', list)
  dragIndex.value = null
}

三、方案二：@vueuse/integrations 的 useSortable

import { useSortable } from '@vueuse/integrations/useSortable'
import type { SortableOptions } from 'sortablejs'

const list = ref([...props.fields])

const sortableOptions: SortableOptions = {
  animation: 200,
  handle: '.drag-handle',
  ghostClass: 'sortable-ghost',
  onEnd: (evt) => {
    const { oldIndex, newIndex } = evt
    if (oldIndex === undefined || newIndex === undefined) return
    const item = list.value.splice(oldIndex, 1)[0]
    list.value.splice(newIndex, 0, item)
    emit('update:fields', list.value)
  }
}

useSortable(el, list, sortableOptions)

四、方案三：vuedraggable（最终选择）

<!-- useSortable：普通 v-for + ref 绑定 -->
<div ref="el">
  <div v-for="item in list" :key="item.label">
    {{ item.label }}
  </div>
</div>

<!-- vuedraggable：组件本身就是可排序列表 -->
<draggable
  v-model="list"
  :animation="200"
  handle=".drag-handle"
  ghost-class="sortable-ghost"
  item-key="label"
>
  <template #item="{ element }">
    <div>{{ element.label }}</div>
  </template>
</draggable>

<script setup>
import draggable from 'vuedraggable'

const props = defineProps({
  fields: { type: Array, default: () => [] },
  selectedField: { type: Object, default: null },
  fieldTypes: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:fields', 'select-field', 'delete-field'])
</script>

<template>
  <draggable
    :model-value="fields"
    @update:model-value="emit('update:fields', $event)"
    :animation="200"
    handle=".drag-handle"
    ghost-class="sortable-ghost"
    class="space-y-3"
    item-key="label"
  >
    <template #item="{ element, index }">
      <div
        class="preview-field"
        :class="{ 'selected': selectedField === element }"
        @click="emit('select-field', element)"
      >
        <div class="flex items-start gap-3">
          <!-- 拖拽手柄 -->
          <div class="drag-handle text-gray-300 hover:text-gray-500 mt-1
                      cursor-grab active:cursor-grabbing">
            ⋮⋮
          </div>

          <!-- 字段内容：20+种类型的渲染 -->
          <div class="flex-1 min-w-0">
            <!-- 字段标题行 -->
            <div class="flex items-center gap-2 mb-2">
              <el-icon :size="16" class="text-blue-500">
                <component :is="fieldTypes.find(f => f.type === element.type)?.icon" />
              </el-icon>
              <span class="font-medium text-gray-800">{{ element.label }}</span>
              <span v-if="element.required" class="text-red-500">*</span>
            </div>

            <!-- 根据字段类型渲染不同组件 -->
            <el-input v-if="element.type === 'text'" ... />
            <el-select v-else-if="element.type === 'select'" ... />
            <el-radio-group v-else-if="element.type === 'radio'" ... />
            <!-- ... 更多字段类型 -->
          </div>

          <!-- 删除按钮 -->
          <el-button @click.stop="emit('delete-field', index)" text>
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
      </div>
    </template>
  </draggable>
</template>

<style scoped>
.sortable-ghost {
  opacity: 0.4;
  background: #E8F0FE;
  border-radius: 8px;
}
</style>

:model-value="fields"
@update:model-value="emit('update:fields', $event)"


父组件 Builder.vue 中监听：

// html
<FormPreview
  :fields="form.fields"
  @update:fields="form.fields = $event"
/>

这是 Vue3 单向数据流的标准做法，vuedraggable 的文档没强调这一点，但实际项目里是必选写法。

.sortable-ghost {
  opacity: 0.4;
  background: #E8F0FE;
  border-radius: 8px;
}

五、踩坑记录

六、三种方案最终对比