Vue drag-and-drop component list to realize dynamic page configuration

Time:2019-10-6

Requirement description

Recently, in a background system, there is a functional product requirement that the page is divided into left and right parts. The left page view is dynamically configured by the right component list, and the left view is assembled by components, which can be dragged up and down to change the order or deleted.

According to this requirement, I made the following demo.

Functional decomposition

  • The list of components on the right can be cloned to the left by dragging and dragging. After dragging, the list of components on the right will not decrease.
  • Components on the left can be expanded or retracted
  • The components on the left can be dragged up and down, deleted, but not to the right.
  • The left component does not change its unfolding and retracting state during drag-and-drop

Demo screenshots

Code address

vue-draggable-list

Code Preview

<template>
 <div>
  <div>
   <h3> Component Configuration Page Display</h3>
   <draggable
    tag="el-collapse"
   
    :list="list2"
    group="comp"
    @change="log"
   >
    <el-collapse
    
     v-for="(element,index) in list2"
     :key="index"
     v-model="activeNames"
     @change="handleChange"
    >
     <el-collapse-item :name="element.id">
      <template slot="title">
       <span>{{element.name}}</span>
       <i @click.stop="deleteItem(index)"></i>
      </template>
      <div>{{ element.content }}</div>
     </el-collapse-item>
    </el-collapse>
   </draggable>
  </div>
  <div>
   <h3> List of Available Components</h3>
   <draggable
   
    :list="list1"
    :group="{ name: 'comp', pull: 'clone', put: false }"
    @change="log"
   >
    <div v-for="element in list1" :key="element.id">{{ element.name }}</div>
   </draggable>
  </div>
 </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
 name: "clone",
 display: "Clone",
 order: 2,
 components: {
  draggable
 },
 data() {
  return {
   list1: [
    {name:'component 1', id: 1, content:'content content content... "},
    {name:'component 2', id: 2, content:'content content content.... "},
    {name:'component 3', id: 3, content:'content content content... "},
    {name:'component 4', id: 4, content:'content content content... "},
    {name:'component 5', id: 5, content:'content content content... "},
    {name:'component 6', id: 6, content:'content content content... "},
    {name:'component 7', id: 7, content:'content content content... "}
   ],
   list2: [],
   activeNames: [],
   count: 0
  };
 },
 methods: {
  log: function(evt) {
   console.log(evt);
   if (evt.added) {
    this.count += 1;
    const item = evt.added.element;
    const idx = this.list2.findIndex(e => e.id === item.id);
    let temp = JSON.parse(JSON.stringify(this.list2));
    temp[idx].id = this.count;
    this.list2 = temp;
   }
  },
  handleChange: function() {},
  deleteItem: function(index) {
   this.list2.splice(index, 1);
  }
 }
};
</script>

summary

Above mentioned is the Vue drag-and-drop component list introduced by Xiaobian to you to realize dynamic page configuration function. I hope it will be helpful to you. If you have any questions, please leave me a message, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!