拖拽伸缩插件vue-draggable-resizable 用法

安装和基本用法

$ npm install --save vue-draggable-resizable

一、注册组件

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

二、基本使用

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-draggable-resizable>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

新增多个热区可拖拽伸且不能超过指定区域

Demo:

<template>
  <div>
    <!-- 添加热区 -->
    <button @click="addArea">新增热区</button>
    <div class="phone">
      <div class="nav">
        <!-- 
        @dragging="onDrag"

        @resizing="onResize" -->
        <vue-draggable-resizable
          v-for="(item, index) in hotAreasArr"
          :key="index"
          :w="50"
          :h="50"
          @dragstop="(x, y) => onDragStop(x, y, index)"
          @resizestop="(x, y, width, height) => onResizeStop(x, y, width, height, index)"
          :parent="true"
        >
        </vue-draggable-resizable>
      </div>
    </div>
  </div>
</template>

<script>

//   import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  data: function () {
    return {
      hotAreasArr: [],
    };
  },
  methods: {
    addArea() {
      this.hotAreasArr.push({
        width: 0,
        height: 0,
        x: 0,
        y: 0,
        dragging: false,
      });
    },
    // 拉伸实时坐标变化
    // onResize: function (x, y, width, height) {
    //   // console.log(x, y, width, height);
    // },
    // 拉伸完获取坐标和宽高
    onResizeStop: function (x, y, width, height, index) {
      console.log(
        "拉伸完获取坐标和宽高：x, y, width, height ==>",
        x,
        y,
        width,
        height
      );
      this.hotAreasArr[index].x = x
      this.hotAreasArr[index].y = y
      this.hotAreasArr[index].width = width
      this.hotAreasArr[index].height = height
    },
    // 元素拖动时坐标变化
    // onDrag: function (x, y) {
    //   this.dragging = true
    // },
    // 元素停止拖动时
    onDragStop: function (x, y, index) {
      console.log("元素停止拖动时：", x, y);
      this.dragging = false;
      this.hotAreasArr[index].x = x
      this.hotAreasArr[index].y = y
    },
  },
};
</script>

<style lang="scss">
@import 'uview-ui/theme.scss';
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
.phone {
  width: 375px;
  height: 667px;
  border: 1px solid red;
  position: relative;
  margin: 0 auto;
  background: url("./assets/nav-bg.png") no-repeat 100%/100%;
}
.nav {
  width: 100%;
  height: 155px;
  border: 2px solid transparent;
  margin-top: 156px;
}
.nav:hover {
  border: 2px solid red;
}
.vdr {
  background: skyblue;
  opacity: 0.6;
}
</style>