Vue Draggable Resizable

index.html

<div style="width: 400px; height: 600px; position: relative;">
    <template v-for="(element, index) in elements">
        <vue-draggable-resizable style="background-color: #332c2b;" :parent="true" :resizable="true" :x="element.x" :y="element.y" :w="element.w" :h="element.h" style="border: 1px solid" @activated="onActivate(element, index)" @deactivated="onDeactivate(element, index)" @resizing="onResize" @dragging="onDrag">
        </vue-draggable-resizable>
    </template>
</div>

script.js

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

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

const app = new Vue({
  el: '#app',
  data: {
    active: null,
    elements: [],
    id: null,
    content: null,
    w: null,
    h: null,
    x: null,
    y: null,
    errors: [],
    index: null
  },
  methods: {
    addElement: function () {
      this.active = false;
      this.elements.push({
        id: null,
        active: true,
        content: null,
        w: 300,
        h: 150,
        x: 50,
        y: 200,
      });
    },
    onActivate: function (element, index) {
      element.active = true;
      this.id = element.id;
      this.active = element.active;
      this.content = element.content;
      this.w = element.w;
      this.h = element.h;
      this.x = element.x;
      this.y = element.y;

      this.index = index;
    },
    onDeactivate: function (element, index) {
      element.active = false;
      this.index = index;
    },
    onResize: function (x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.w = this.width;
      this.h = this.height;
    },
    onDrag: function (x, y) {
      this.x = x;
      this.y = y;
    },
    changeModel: function () {
      this.elements[this.index]['w'] = Number(this.w);
      this.elements[this.index]['h'] = Number(this.h);
      this.elements[this.index]['x'] = Number(this.x);
      this.elements[this.index]['y'] = Number(this.y);

      console.log(app.elements);
    }
  }, 
});

vue-draggable-resizable.markdown

Vue Draggable Resizable

Vue Draggable Resizable

A Pen by Tian on CodePen.

License.