Implementing a Drag‑and‑Drop Form Generator with Vue and VueDraggablePlus

The post documents the end‑to‑end development of a form‑generator UI that allows users to configure, drag, and preview form items in a Vue application. It starts with a brief video demo link, then outlines the functional split between the upper layer (title, page toggle, save) and the lower layer (form builder) and details the responsibilities of each sub‑section (left data‑item panel, middle display panel, right configuration panel).

After acknowledging the complexity of the requirement, the author researches a similar open‑source solution (Vben) and extracts key implementation ideas, such as using VueDraggablePlus for drag‑and‑drop, a central form object that holds form configuration and an array of form items, each with a unique ID , and leveraging the Vue is attribute to render different component types dynamically.

The rendering hierarchy is explained: the outer form component renders a VueDraggable list, which iterates over items and creates a DisplayItem wrapper; DisplayItem then renders the appropriate component via the is attribute. The configuration panel follows the same pattern, using the is attribute to load the correct config component based on the selected item.

Key implementation steps are listed, focusing first on establishing the core drag‑and‑drop functionality, then progressively adding features such as cloning, restricting pull/push behavior, handling nested tree data, and synchronizing data between panels. The author provides concrete code examples for the drag component, the data‑structure factories ( createFormConfig , addModule , addDataItem ), and the constants that define the five display and config component types.

<template>
  <div class="flex">
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list1"
      animation="150"
      ghostClass="ghost"
      group="people"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove">
      <div v-for="item in list1" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
        {{ item.name }}
      </div>
    </VueDraggable>
    ...
</template>
<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
  { name: 'Joao', id: '1' },
  { name: 'Jean', id: '2' },
  { name: 'Johanna', id: '3' },
  { name: 'Juan', id: '4' }
])
const list2 = ref(list1.value.map(item => ({ name: `${item.name}-2`, id: `${item.id}-2` })))
function onUpdate() { console.log('update') }
function onAdd() { console.log('add') }
function remove() { console.log('remove') }
</script>

Further, the article describes how to configure the drag group to allow cloning from the left tree panel without enabling reverse dragging, using a group definition like { name: DraggableGroup, pull: 'clone', put: false } . It also shows how to transform dragged data into Vue components via v-for and the DisplayItem wrapper, and outlines the five component types (input, radio, select, date, table) with their respective display and config constants.

Component architecture is broken down into layout components (left data‑item panel, middle display panel, right config panel), display components (the five form field types), and configuration components (form‑level and field‑level settings). The author emphasizes keeping data control at the top level ( formConfig ) and passing it down via props, while child components emit events to modify the central state.

A concise implementation roadmap is provided, from requirement familiarization, through prototype reconstruction, left‑panel CRUD and collapse logic, drag handling, data‑structure definition, component generation, validation, and finally integration of the display‑panel and config‑panel. The post concludes with a reflection on the learning experience and a recommendation to read "Vue.js Design and Implementation" by HcySunYang.