当前位置：首页 > VUE

vue实现表单拖拽

2026-03-30 01:08:03VUE

Vue 实现表单拖拽的方法

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适用于列表拖拽排序。

安装依赖：

vue实现表单拖拽

npm install vuedraggable

示例代码：

vue实现表单拖拽

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      formItems: [
        { id: 1, name: '输入框' },
        { id: 2, name: '选择框' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成')
    }
  }
}
</script>

原生 HTML5 拖放 API

适用于需要自定义拖拽行为的场景。

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

<script>
export default {
  data() {
    return {
      formItems: [...],
      draggedItem: null
    }
  },
  methods: {
    dragStart(event, item) {
      this.draggedItem = item
      event.dataTransfer.effectAllowed = 'move'
    },
    drop(event, targetItem) {
      const index = this.formItems.indexOf(this.draggedItem)
      const targetIndex = this.formItems.indexOf(targetItem)
      this.formItems.splice(index, 1)
      this.formItems.splice(targetIndex, 0, this.draggedItem)
    }
  }
}
</script>

表单生成器拖拽实现

适用于可视化表单设计场景。

<template>
  <div class="form-builder">
    <div class="components-panel">
      <div 
        v-for="comp in components"
        :key="comp.type"
        draggable
        @dragstart="dragComponent = comp"
      >
        {{ comp.name }}
      </div>
    </div>

    <div 
      class="form-canvas"
      @dragover.prevent
      @drop="addComponent"
    >
      <form-item 
        v-for="(item, index) in formItems"
        :key="item.id"
        :item="item"
        @delete="removeItem(index)"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragComponent: null,
      components: [
        { type: 'input', name: '文本框' },
        { type: 'select', name: '下拉框' }
      ],
      formItems: []
    }
  },
  methods: {
    addComponent() {
      if (this.dragComponent) {
        this.formItems.push({
          ...this.dragComponent,
          id: Date.now()
        })
      }
    },
    removeItem(index) {
      this.formItems.splice(index, 1)
    }
  }
}
</script>