Vue's drag and drop plugin: vue.draggable

Chinese document address:

vue.draggable Chinese Documentation - itxst.com Vue.Draggable is a Vue drag-and-drop plugin based on Sortable.js. Supports mobile devices, dragging and selecting text, smart scrolling, can drag and drop between different lists, does not rely on jQuery as the basis, is compatible with vue 2 transition animations, and supports undo operations. In short, it is a very good vue drag and drop component. https://www.itxst.com/vue-draggable/tutorial.html 1. Installation

npm i -S vuedraggable

2. Introduce

import draggable from 'vuedraggable'

3. use

 :key="keyDate" When changing listBak, refresh the chart display

<template>
  <div>
    <!-- 调用组件  -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="list" :group="groupA" class="dragBox" animation="100" @end="refreshKay">
            <div v-for="(item, index) in list" :key="index" class="show-li">{
   
   { item.name }}</div>
          </draggable>
        </el-row>
      </el-col>
      <el-col :span="12" :key="keyDate">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="listBak" :group="groupB" animation="100" class="dragBox" @end="refreshKay">
            <el-col v-for="(item, index) in listBak" :key="index" :span="item.width">
              <div @click="showTest(item)">
                <component :is="item.id" v-if="listComponents.includes(item.id)"></component>
              </div>
            </el-col>
          </draggable>
        </el-row>
        '查看顺序:' {
   
   {listBak}}
      </el-col>
      <el-col :span="8">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="form.width"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateTest">立即更新</el-button>
        <el-button type="primary" @click="delTest">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable'

export default {
  name: 'index',
  components: {
    // 注册draggable组件
    draggable,
    China: () => import('@/view/echarts/map/China'),
    Shandong: () => import('@/view/echarts/map/Shandong')
  },
  data() {
    return {
      listComponents: ['Shandong', 'China'],
      listBak: [],
      form: {
        id: '',
        name: '',
        width: 0
      },
      keyDate: 'T',
      list: [
        {
          id: 'China',
          name: '中国',
          width: 24
        },
        {
          id: 'Shandong',
          name: '山东',
          width: 24
        }
      ],
      groupA: {
        name: 'test',
        pull: true, // 可以拖出
        put: false // 可以拖入
      },
      groupB: {
        name: 'test',
        pull: false,
        put: true
      }
    }
  },
  methods: {
    showTest(param) {
      this.form = JSON.parse(JSON.stringify(param))
    },
    updateTest() {
      this.listBak.forEach(i => {
        if (i.id === this.form.id) {
          i.width = this.form.width
        }
      })
      this.refreshKay()
    },
    delTest() {
      // 获取元素在数组的位置
      let num = -1
      for (let i = 0; i < this.listBak.length; i++) {
        let item = this.listBak[i]
        if (item.id === this.form.id) {
          num = i
        }
      }
      // 删除元素
      if (num !== -1) {
        this.list.unshift(this.form)// 加回原数组
        this.listBak.splice(num, 1)// 从当前数组删除
      }
      this.refreshKay()
    },
    refreshKay() { // 刷新整体页面
      this.keyDate = 'T' + new Date()
    }
  }
}
</script>

<style scoped>
.dragBox {
  padding: 20px;
  min-height: 300px;
}
.show-li {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
.show-li:hover {
  background-color: #f1f1f1;
  cursor: move;
}

</style>