vue项目中 五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序

背景：项目中用到1、4、6、9、12、16宫格排序，拖拽换位等场景，项目是监控的视频矩阵，用户矩阵拖拽排序换位，之前已经实现1、4、9、12、16等矩阵式排列的拖拽排序，但是六宫格要求五小一大，之前的基于vue-grid-layout开发的拖拽对换位置已经实现除了五小一大的

需求图：五小一大互相可以拖拽换位排序

实现方案：

基于vue-dragging https://github.com/hilongjw/vue-dragging

实现六宫格拖拽，该组件也可实现1,4、6、9等需要简单修改即可，下面分享一下构建六宫格的思路

第一步：在vue项目中安装 vue-dragging

npm install awe-dnd --save

第二步：在main.js中引用

import VueDND from 'awe-dnd'
Vue.use(VueDND)

第三步：在vue组件中使用

<template>
  <div class="other-group">
    <h2>五小一大拖拽</h2>
    <div class="des">模块拖拽，不能重新渲染dom，不能改变数据结构</div>
    <br>
    <div class="color-show">
      <div v-for="color in colors2" v-dragging="{ list: colors2, item: color, group: 'color2' }" class="color-box" :style="{'background-color': color.text}"
        :key="color.text">
        {{color.text}}
      </div>
    </div>
  </div>
</template>
<!--your.vue-->
<script>
export default {
  data() {
    return {
      colors2: [
        { text: "Aquamarine" },
        { text: "Hotpink" },
        { text: "Gold" },
        { text: "Crimson" },
        { text: "Blueviolet" },
        { text: "rgb(0,100,"+Math.random()*100+")" }
      ],
    }
  },
  //   if your need multi drag
  mounted: function () {

    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })


    this.$dragging.$on('dragend', function (data) {
      console.log('dragend', data)
    })
  }
}
</script>

<style scoped>
.other-group,
.multi-group {
  margin-left: 20px;
}

.color-show {
  /* display: flex;
  flex-wrap: wrap; */
  width: 30rem;
  margin: 0 auto;
}
.color-box {
  float: left;
  width: 33%;
  height: 6rem;
  background: #efefef;
  line-height: 6rem;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
}
.color-box:first-child {
  width: 66%;
  height: 12rem;
}
.color-box.dragging {
  transform: scale(1.1);
}
</style>

其他宫格例如：九宫格 只需要修改 color2数组长度和修改对应的样式即可

九宫格code:

<template>
  <div class="other-group">
    <h2>九宫格拖拽</h2>
    <div class="des">模块拖拽，不能重新渲染dom，不能改变数据结构</div>
    <br>
    <div class="color-show">
      <div v-for="color in colors2" v-dragging="{ list: colors2, item: color, group: 'color2' }" class="color-box" :style="{'background-color': color.text}"
        :key="color.text">
        {{color.text}}
      </div>
    </div>
  </div>
</template>
<!--your.vue-->
<script>
export default {
  data() {
    return {
      colors2: [
        { text: "Aquamarine" },
        { text: "Hotpink" },
        { text: "Gold" },
        { text: "Crimson" },
        { text: "Blueviolet" },
        { text: "Lightblue" },
        { text: "green" },
        { text: "red" },
        { text: "rgb(0,100," + Math.random() * 100 + ")" }
      ],
    }
  },
  //   if your need multi drag
  mounted: function () {

    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })


    this.$dragging.$on('dragend', function (data) {
      console.log('dragend', data)
    })
  }
}
</script>

<style scoped>
.other-group,
.multi-group {
  margin-left: 20px;
}

.color-show {
  display: flex;
  flex-wrap: wrap;
  width: 30rem;
  margin: 0 auto;
}
.color-box {
  float: left;
  width: 33%;
  height: 6rem;
  background: #efefef;
  line-height: 6rem;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
}

.color-box.dragging {
  transform: scale(1.1);
}
</style>

在vue3.x中使用请看这一篇文章

vue项目中，兼容vue3.0 & 1.0 & 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽https://mp.csdn.net/mp_blog/creation/editor/122545182