<template>
  <div id="app">
    <div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
      <VueDraggableResizable
        :x="x"
        :y="y"
        :w="w"
        :h="h"
        :parent="true"
        :otherstatus="true"
        @resizing="handleResize"
        @dragging="handleDrag"
      >
        <p>Component</p>
      </VueDraggableResizable>
    </div>
    <button @click="handleMove">移动</button>
    <button @click="handleChangeWidth">变宽</button>
  </div>
</template>

<script>
import VueDraggableResizable from './components/vue-draggable-resizable'

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      x: 50,
      y: 50,
      w: 100,
      h: 100
    }
  },
  methods: {
    handleMove () {
      this.x += 10
    },
    handleChangeWidth () {
      this.w += 10
    },
    handleResize (x, y, w, h) {
      this.x = x
      this.y = y
      this.w = w
      this.h = h
    },
    handleDrag (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

<style>
  .active {
    border: 1px dashed black;
  }
</style>
