vue的拖拽插件: vue.draggable

中文文档地址:

vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html1.安装

npm i -S vuedraggable

2.引入

import draggable from 'vuedraggable'

3.使用

** :key="keyDate" **改变 listBak时,刷新图表显示

<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>