vue-draggable-resizable定制化可拖动控件

最近遇到一个需求：前端定制化生成合同模板，生成时可以在指定位置拖放指定的控件，可动态编辑指定控件的属性和位置，最后将控件的位置等属性传给后台，后续使用模板签署合同时，乙方可在模板上指定位置签署。

 点击左边控件列表=》添加控件到文件上=》点击文件上的控件激活该控件=》编辑该控件的相关字段=》提交数据

控件类型有多种，支持多个控件同时添加，文本类型支持长宽拉伸设置

刚好有一个很好用的vue插件，那就是今天的猪脚了：vue-draggable-resizable

github地址：https://github.com/mauricius/vue-draggable-resizable，文档挺详细的，使用：

npm i vue-draggable-resizable -S

main.js

import 'vue-draggable-resizable/dist/VueDraggableResizable.css';

可以直接在页面引入：

<template>
    <div class="drag-wrap">
         <vue-draggable-resizable>
                
         </vue-draggable-resizable>
     </div>
<template>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
    components: { VueDraggableResizable },
    、、、
}

渲染效果：

已经很棒了，但依然需要做进一步的定制化，满足我们项目的需求：

1、需求：由于控件可以添加多个、多种类，多以肯定会使用v-for生成多个拖拽控件，这就涉及到，当我点击控件对其属性进行编辑的时候需要知道当前点击的控件具体是哪一个。

实际情况：点击事件是没有返回参数

解决办法：把源代码拷贝出来并