一个简单的vuedraggle练习

在vue项目中npm i vuedraggable引入

页面中

<template>
    <div class="row">
      <div class="col-1">
        <h3>组件</h3>
        <draggable 
             class="list-group-1" 
             :list="list1" 
             :group="{ name: 'people', pull: 'clone', put: false }"
             :clone="cloneDog"
             @change="log">
          <div
            class="list-group-item1"
            v-for="(element, index) in list1"
            :key="element.name"
          >
            <el-button style="width:80%" @click="add(element)">
                {{ element.name }}
            </el-button>
            
          </div>
        </draggable>
      </div>
  
      <div class="col-2">
        <h3>生成</h3>
        <el-form label-width="80px">
        <draggable class="list-group-2" 
        :list="list2" group="people" @change="log">
       
          <div
            class="list-group-item"
            v-for="(element, index) in list2"
            :key="index"
            @click="chooseItem(element,index)"
          >
          <el-form-item :label="element.label" style="width:80%">   
            <div v-if="element.name=='输入框'">        
                <el-input :placeholder="element.placeholder" v-model="element.data" />      
            </div>
            <div v-if="element.name=='下拉'">
                <el-select v-model="element.data" :placeholder="element.placeholder">
                    <el-option
                    v-for="item in element.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div v-if="element.name=='单选'">
              <el-radio-group v-model="element.data">
                <el-radio v-for="item in element.options"  :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </div>
            <div v-if="element.name=='计数器'">
              <el-input-number v-model="element.data"></el-input-number>
            </div>
            
          </el-form-item> 
          <el-button @click="del(index)"  size="mini" class="el-icon-delete delbtn"></el-button>   
          </div> 
     
        
        </draggable>
      </el-form> 
      </div>
      <div class="col-3">
        <h3>属性</h3>
        <el-form label-width="80px" >
         
          <el-form-item label="标题" v-if="itemList.name">
             <el-input v-model="itemList.label"></el-input>
           </el-form-item>
           <el-form-item label="提示" v-if="itemList.name">
             <el-input v-model="itemList.placeholder"></el-input>
           </el-form-item>
           <el-form-item label="选项" v-if="itemList.name=='单选' ||  itemList.name=='下拉'">
            <div v-for="item in itemList.options">
              label:
              <el-input style="width: 30%;" v-model="item.label"></el-input>
              value:
              <el-input style="width: 40%;" v-model="item.value"></el-input>
              
            </div>
            <el-button @click="addOption(itemList.options)">添加</el-button>
           </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  <script>
  import draggable from "vuedraggable";
  export default {
    name: "custom-clone",
    display: "custom Clone",
    order: 3,
    components: {
      draggable
    },
    data() {
      return {
        list1: [
          { name: "输入框", id: 1 ,label:'输入框'},
          { name: "下拉", id:2 ,options:[{value:'1',label:'1'}]},
          { name: "单选", id: 3 ,options:[{value:'1',label:'1'}]},
          { name: "计数器", id: 4 ,label:'计数器'},
        ],
        list2: [
         
        ],
        itemList:{
          name:null
        },
        itemIndex:null
      };
    },
    methods: {
      //新增组件
      add(e){
        this.list2.push(e)
        // this.chooseItem(e)
      },
      //删除组件
      del:function(e){
         console.log(e)
         this.list2.splice(e,1)
      },
      //编辑属性
      chooseItem(e,index){
        this.itemList=this.list2[index]
        this.itemIndex=index
      },
      clone: function(el) {
        return {
          name: el.name + " cloned"
        };
      },
      log: function(evt) {
        window.console.log(evt);
      },
      addOption(){
          let item ={
            label:'',
            value:''
          }
          this.list2[this.itemIndex].options.push(item)
      },
      //克隆组件
      cloneDog(e) {
        console.log("e",e)
        console.log(this.list1)
        // return{
        //   name:e.name,
        //   options:e.options,
        //   label:e.label
        // }
        return JSON.parse(JSON.stringify(e))
      }
    }
  };
  </script>
  <style>
   .row{
    display: flex;
   } 
   .col-1{
    width: calc(25% - 2px);
    border: 1px solid black;
    height: calc(100vh - 2px) ;
    overflow: auto;
   }
   .col-2{
    width: calc(50% - 2px);
    border: 1px solid black;
    height: calc(100vh - 2px) ;
    overflow: auto;
   }
   .col-3{
    width: calc(25% - 2px);
    border: 1px solid black;
    height: calc(100vh - 2px) ;
    overflow: auto;
   }
   .list-group-item{
    display: flex;
    min-height: 40px;
    margin-bottom: 20px;
    border: 1px solid black;
   }
   .list-group-item .el-form-item{
    margin-bottom: 0!important;
   }
   .list-group-item1{
    text-align: center;
    align-items: center;
    width: 50%;
    margin-bottom: 10px;
   }
   .list-group-1{
    display: flex;
    flex-wrap: wrap;
   }
   .list-group-2{
    display: flex;
    flex-direction: column;
   }
   .delbtn{
     display: none;
   }
   .delbtn:hover{
    height: 40px;
    display: block;
   }
  </style>

结果