Vue3+vuedraggable实现动态配置页面

npm install vuedraggable@4.1.0 --save

<template>
  <div>
    <div class="section-container">
      <h4>组件列表</h4>
      <draggable 
      class="components-view"
      item-key="index" 
      :list="sectionList" 
      :sort="false"
      :forceFallback="true"
      ghost-class="ghost"
      dragClass="dragClass" 
      group="vehicle-station"
      >
        <template #item="{ element, index }">
            <div class="section">{{ element.type }}</div>
        </template>
      </draggable>
    </div>
    <div class="components-container">
      <h4>放置列表</h4>
      <draggable 
      item-key="index" 
      :list="componentsList"  
      animation="300"
      :scroll="true"
      :forceFallback="false"
      ghost-class="ghost"
      dragClass="dragClass" 
      group="vehicle-station">
        <template #item="{ element, index }">
          <transition name="el-fade-in-linear">
            <div>
              <div v-if="element.type === 'input'" class="section">输入框{{ element.data }}</div>
              <div v-if="element.type === 'textarea'" class="section">文本域</div>
            </div>
          </transition>
        </template>
      </draggable>
    </div>
    <!-- 这里存放组件 -->
    <div class="operate-container">
      <h4>组件输入</h4>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import draggable from 'vuedraggable'

interface list {
  type: string,
  name: string,
  data: any
}

const sectionList = ref<list[]>([
  {
    type: 'input',
    data: '',
    name: 'input'
  },
  {
    data: '',
    type: 'textarea',
    name: 'textarea'
  }
])

const componentsList = ref<list[]>([])
</script>

<style scoped>
.components-view,
.components-wrap {
  height: 100%;
}

.dragClass {
  border: 1px solid red;
  border-radius: 8px;
}

.ghost {
  background-color: red !important;
}

.operate-container,
.section-container,
.components-container {
  float: left;
  padding-top: 30px;
  text-align: center;
  width: 300px;
  height: 800px;
}

.section-container {
  background-color: blanchedalmond;
}

.components-container {
  margin-left: 30px;
  background-color: rgb(184, 205, 178);
}

.operate-container {
  margin-left: 30px;
  background-color: rgb(125, 176, 228);
}

.section {
  text-align: center;
  width: 150px;
  height: 80px;
  line-height: 80px;
  margin-bottom: 30px;
  background-color: cadetblue;
  cursor: pointer;
}
</style>

  <div class="operate-container">
      <h4>组件输入</h4>
      <div>
        <!-- TODO:输入数据的时候要双向绑定，赋值给editorData -->
        <input v-if="editorData.type === 'input'" type="text" v-model="editorData.data" @change="setEditorData">
        <textarea v-if="editorData.type === 'textarea'" rows="4" cols="30" v-model="editorData.data"
          @change="setEditorData"></textarea>
      </div>
    </div>
    const onEnd = (evt: any) => {
  setCurrent(evt.newIndex)
}

-----
const setCurrent = (idx: number) => {
  // 设置当前编辑的组件数据
  editorData.value = { ...componentsList.value[idx] }
  editorIndex.value = idx
}

const setEditorData = () => {
  // 将编辑的组件数据赋值给放置列表数据
  componentsList.value[editorIndex.value] = editorData.value
}

const onEnd = (evt: any) => {
  if (evt.target.className === 'components-view' && evt.to.className === 'components-wrap') {
    // 左侧组件列表的下标
    sectionIndex.value = evt.oldIndex
  }
  setCurrent(evt.newIndex)
}

const setCurrent = (idx: number) => {
  // 设置当前编辑的组件数据
  editorData.value = { ...componentsList.value[idx] }
  editorIndex.value = idx
}

const setEditorData = () => {
  // 填完值以后两侧数据都发生了改变，需要重新修改数据
  // 把上一次拖动的左侧列表数据清空
  sectionList.value[sectionIndex.value].data = ''
  // 将编辑的组件数据赋值给放置列表数据
  componentsList.value[editorIndex.value] = editorData.value
}