vue2 使用 vuedraggable实现可视化拖拽 生成自定义表单

Vue2 中，`vuedraggable`是一个方便的第三方库，它可以帮助我们轻松地在组件上实现拖放功能，适合用于构建各种需要用户交互的场景，例如生成动态布局的自定义表单。通过 `vuedraggable`，你可以给 Vue 组件添加拖拽属性，比如允许元素在列表中拖动、排序，甚至与其他元素互动。

首先，你需要安装 `vuedraggable` 包，可以使用 npm 或者 yarn 进行安装：

npm install vuedraggable
# 或者
yarn add vuedraggable

然后，在你的 Vue 组件中导入并使用它：

<template>
  <div id="draggable-form">
    <draggable :list="items" @start="dragStart" @end="dragEnd">
      <div v-for="(item, index) in items" :key="index" draggable-item>
        <input type="text" :value="item.value" @change="updateItem(index)">
        <button @click="removeItem(index)">删除</button>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { value: '' },
        // ... 其他初始项
      ],
    };
  },
  methods: {
    dragStart({ event }) {
      console.log('开始拖动', event);
    },
    dragEnd({ newIndex, oldIndex }) {
      this.items.splice(oldIndex, 1);
      this.items.splice(newIndex, 0, this.items[oldIndex]);
      console.log('结束拖动', { newIndex, oldIndex });
    },
    updateItem(index, newValue) {
      this.items[index].value = newValue;
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

在这个例子中，`draggable`属性绑定了数据数组`items`，`@start` 和 `@end` 事件处理器分别处理拖动开始和结束时的动作。当用户更改输入字段时，`updateItem`方法会更新对应的项值。如果用户删除项，`removeItem`会被调用。