在实际应用场景中，我们用vue-draggable-resizable时，我们的拖拽区域的父元素可能会在我们窗口变化的时候，宽高发生变化，而我们的拖拽区域限定在父元素中，初始化去定位的时候，就会出现问题，包括拖拽过程中由于未获取到准确的初始宽高，可能等比例拖拽也会存在问题。
那么我们怎么去解决这些问题呢？
首先，在vue的mounted生命周期，在nextTick中处理，在vue-draggable-resizable方法里面有一个checkParentSize方法，我们可以通过这个方法在拖拽元素上添加ref去获取到这个方法执行：
mounted() {
this.$nextTick(() => {
this.$refs.dragRef?.checkParentSize()
})
}
上面解决了初始化显示位置错乱的问题，那么我们拖拽的时候放大缩小变形，未等比例放大缩小的问题怎么解决呢？我们直接用它本身组件的方式已经不够用了，这时候我们只能把源码全部拷贝出来，在它源码的基础上添加一个resetPosition重置位置的方法：
methods: {
resetPosition(left, top, width, height) {
this.top = top
this.height = height
this.bottom = this.parentHeight - this.height - top
this.left = left
this.width = width
this.right = this.parentWidth - this.width - left
this.aspectFactor = (this.w !== 'auto' ? this.w : width) / (this.h !== 'auto' ? this.h : height)
},
}
那么，为什么我们要去添加这个方法呢？其实很简单，这样子处理是为了用重新计算的宽高位置，去重置一下初始位置。 有了上面的方法，我们就可以在父元素容器计算完宽高后，使用它了：
this.$refs.dragRef.resetPosition(this.x, this.y, this.width, this.height)
