今天给小伙伴们推荐2个很棒的基于 Vue.js 拖拽与缩放组件VueDragResize，并贴上Github地址和代码示例。

1、Vue-Drag-Resize

vue-drag-resize 是一款高质量的基于 Vue.js 用于可调整大小和可拖动元素插件，没有外部依赖。

安装

$ npm i vue-drag-resize -S

插件使用

<template>
  <div>
    <VueDragResize :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
      <img src="../assets/logo-vue.png" v-drag height="150px" width="150px" />
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";

export default {
  components: {
    VueDragResize
  },
  
  data() {
    return {
      top: 0, left: 0, width: 0, height: 0
    }
  },
  
  methods: {
    resize(newRect) {
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    }
  }
};
</script>

<style>
  // outline: none：去除拖拽组件的边框
  .vdr.active:before{
    outline: none
  }
</style>

*如果使用拖拽缩放后，出现文本框input无法输入的情况，可尝试使用以下方法解决。

<vue-drag-resize @activated="onActivated">

methods: {
  onActivated() {
    this.$refs['yourinput'].focus();
  }
}

附上示例链接及仓库地址

# 预览地址
http://kirillmurashov.com/vue-drag-resize/

# github地址
https://github.com/kirillmurashov/vue-drag-resize

2、VueDraggableResizable

vue-draggable-resizable 基于 Vue2 的高定制化拖拽缩放组件，让页面拖拽缩放变得如此简单！

安装

$ npm i vue-draggable-resizable -S

插件使用

<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>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  },
  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>

提供各种演示示例及源码展示，总有一个适合你。

# 预览地址
https://mauricius.github.io/vue-draggable-resizable/

# github地址
https://github.com/mauricius/vue-draggable-resizable

ok，今天的分享就到这里。如果感兴趣可以自己去尝试一下哈~~~