vue-draggable-resizable 的基本使用模式（极简模型）

<vue-draggable-resizable
	@activated = "onActivated({index: index, index2: index2})"
	@dragging = "onDrag"
	@resizing = "onResize"
	@dragstop = "onDragStop({index: index, index2: index2})"
	@resizestop = "onResizeStop({index: index, index2: index2})"
	:key = "item2.id + '-' + index2"
	:grid = "[1,1]"
	:w = item2.width
	:h = item2.height
	:x = item2.x
	:y = item2.y
	:z = item2.z
	:parent = "true">
	<div
		v-if="item2.type == 'ui-text'"
		class="ui-richText">
		<p :style="{'line-height': item2.lineHeight + 'px'}">{{item2.content}}</p>
	</div>
	<div
		v-if="item2.type == 'ui-image'"
		class="ui-image">
		<img :src="item2.content" alt="" />
	</div>
</vue-draggable-resizable>

import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  data () {
    return {
      // 拖拽缩放
      drag: false,
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components: {
    VueDraggableResizable
  },
  methods: {
    onActivated: function(e){
      var that = this;
      var layout = that.layout[e.index].child[e.index2];

      that.x = layout.x
      that.y = layout.y
      that.width = layout.width
      that.height = layout.height
    },
    onDrag: function (x, y) {
      var that = this;

      that.x = x;
      that.y = y;
    },
    onResize: function (x, y, width, height) {
      var that = this;

      that.x = x
      that.y = y
      that.width = width
      that.height = height
    },
    onDragStop: function(e){
      var that = this;
      var layout = that.layout[e.index].child[e.index2];

      layout.x = that.x;
      layout.y = that.y;
    },
    onResizeStop: function(e){
      var that = this;
      var layout = that.layout[e.index].child[e.index2];

      layout.x = that.x;
      layout.y = that.y;
      layout.width = that.width;
      layout.height = that.height;
    }
  }
}