div拖动变换位置+缩放方案（持续更新）

前言

vue-drag-resize过于灵活 不适用需求。
此处以拖动功能为主 增加缩放，纯拖拽div换位参考另外一篇vue 实现拖拽div交换位置

正文

缩放思路1，预设5等份宽度控制数组sizeLevelArr 按钮增减level来控制宽度大小。

<template>
  <div class="root">
    <el-button size="mini"
               class="mb10"
               @click="draggable=!draggable">{{draggable?'完成':'管理'}}</el-button>
    <transition-group tag="div"
                      class="container">
      <div class="item"
           :class="'item'+i"
           v-for="(item,i) in items"
           :key="item.key"
           :draggable="draggable"
           @dragstart="handleDragStart($event, item)"
           @dragover.prevent="handleDragOver($event, item)"
           @dragenter="handleDragEnter($event, item)"
           @dragend="handleDragEnd($event, item)"
           :style="{
             width:sizeLevelArr[item.sizeLevel].vw+'%',
             height:sizeLevelArr[item.sizeLevel].vh+'%',
             background:item.color,
             opacity:draggable?'0.7':1
            }">
        <div>{{item}}</div>
        <div class="handleBox"
             v-show="draggable">
          <el-button size="mini"
                     class="btn"
                     :disabled="item.sizeLevel<=0"
                     @click="item.sizeLevel--">-</el-button>
          <el-button size="mini"
                     class="btn"
                     :disabled="item.sizeLevel>=4"
                     @click="item.sizeLevel++">+</el-button>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sizeLevelArr: [
        { vw: (100 / 5 * 1) - 1, vh: 49 },
        { vw: (100 / 5 * 2) - 1, vh: 49 },
        { vw: (100 / 5 * 3) - 1, vh: 49 },
        { vw: (100 / 5 * 4) - 1, vh: 49 },
        { vw: (100 / 5 * 5) - 1, vh: 49 }
      ],
      draggable: false,
      items: [
        { key: 0, color: '#2883a0', sizeLevel: 0 },
        { key: 1, color: '#3883a0', sizeLevel: 1 },
        { key: 2, color: '#4883a0', sizeLevel: 1 },
        { key: 3, color: '#5883a0', sizeLevel: 0 },
        { key: 4, color: '#6883a0', sizeLevel: 1 },
        { key: 5, color: '#7883a0', sizeLevel: 1 },
        { key: 6, color: '#8883a0', sizeLevel: 0 },
        { key: 7, color: '#9883a0', sizeLevel: 1 }
      ],
      ending: null,
      dragging: null
    }
  },
  methods: {
    handleDragStart (e, item) {
      this.dragging = item
    },
    handleDragEnd (e, item) {
      if (this.ending.key === this.dragging.key) {
        return
      }
      let newItems = [...this.items]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(this.ending)
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))
      this.items = newItems
      this.$nextTick(() => {
        this.dragging = null
        this.ending = null
      })
    },
    handleDragOver (e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter (e, item) {
      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
      this.ending = item
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 125px);
  display: flex;
  flex-wrap: wrap;
}
.item {
  position: relative;
  margin: 0 0.8% 0.8% 0;
  color: #fff;
  transition: all linear 0.3s;
  .handleBox {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>

缩放思路2：待补充