vue中使用drag事件左右拖动div，改变宽高大小

实现思路：

1.使用上左(top-left)，上(top)，上右(top-right)等6个小点实现拖动效果

  

2.拖动时记录起始点，结束点

startPoint:{x:0,y:0},//开始坐标，拖动改变定位

endPoint:{x:0,y:0},//结束坐标

startDrag:{x:0,y:0},//开始坐标,拖动改变宽高

endDrag:{x:0,y:0},

3..设置div的初始宽高和定位

left:600,

top:100,

width:200,

height:100,

3..拖动时不断刷新div的定位和宽高，拖动结束时固定宽高和定位

实现方法：

transform偏移，left,top定位，width宽，height高

类名lock表示6个圆点，top-left,top,top-right,left,right,bottom-left,bottom,bottom-right

完整示例：