vue draggable resizable 實現可拖拽縮放的組件功能

<vue-draggable-resizable :is-conflict-check="true">

<vue-draggable-resizable :snap="true">

<vue-draggable-resizable :snap="true" :snap-tolerance="20">

$ npm install --save vue-draggable-resizable-gorkys

//main.js
import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'

// 導入默認樣式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

<template>
 <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
 <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on: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>
 </vdr>
 <vdr
 :w="200"
 :h="200"
 :parent="true"
 :debug="false"
 :min-width="200"
 :min-height="200"
 :isConflictCheck="true"
 :snap="true"
 :snapTolerance="20"
 >
 </vdr>
 </div>
</template>

<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
 components: {vdr},
 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>