当前位置：首页 > VUE

拖拽表单Vue实现方法

2026-01-21 17:10:08VUE

拖拽表单的Vue实现方法

使用Vue.Draggable组件

Vue.Draggable是基于Sortable.js的Vue组件，适用于列表拖拽场景。安装命令：

npm install vuedraggable

基础实现代码：

<template>
  <draggable v-model="formItems" @end="onDragEnd">
    <div v-for="item in formItems" :key="item.id">
      {{ item.label }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      formItems: [
        { id: 1, label: '文本框' },
        { id: 2, label: '选择框' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('新顺序:', this.formItems)
    }
  }
}
</script>

自定义拖拽实现

通过HTML5原生API实现基础拖拽功能：

<template>
  <div 
    v-for="item in formItems" 
    :key="item.id"
    draggable="true"
    @dragstart="handleDragStart($event, item)"
    @dragover.prevent
    @drop="handleDrop($event, item)"
  >
    {{ item.label }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [...],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDrop(e, targetItem) {
      const fromIndex = this.formItems.indexOf(this.draggedItem)
      const toIndex = this.formItems.indexOf(targetItem)
      this.formItems.splice(fromIndex, 1)
      this.formItems.splice(toIndex, 0, this.draggedItem)
    }
  }
}
</script>

表单生成器集成

结合动态表单生成器实现完整拖拽表单：

<template>
  <div class="form-builder">
    <div class="components-panel">
      <draggable 
        :list="availableComponents"
        :group="{ name: 'form', pull: 'clone', put: false }"
        item-key="id"
      >
        <template #item="{ element }">
          <div class="component-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <div class="form-container">
      <draggable 
        v-model="formComponents"
        group="form"
        item-key="id"
        @add="onComponentAdded"
      >
        <template #item="{ element }">
          <component 
            :is="element.type" 
            v-bind="element.props"
          />
        </template>
      </draggable>
    </div>
  </div>
</template>

状态持久化

结合Vuex或Pinia管理拖拽状态：

// store.js
export const useFormStore = defineStore('form', {
  state: () => ({
    components: []
  }),
  actions: {
    updateComponents(newOrder) {
      this.components = newOrder
    }
  }
})

性能优化建议

对于大型表单实现虚拟滚动：

<draggable v-model="items">
  <template #item="{ element }">
    <RecycleScroller
      :items="items"
      :item-size="50"
      key-field="id"
    >
      <template #default="{ item }">
        <div class="item">{{ item.text }}</div>
      </template>
    </RecycleScroller>
  </template>
</draggable>