vue3-draggable-resizable父元素宽高更改了子元素拖拽还是上一次父元素宽高的拖动位置

在 Vue3-Draggable-Resizable 组件中，当父元素的宽度或高度发生改变时，子元素的拖拽位置可能会出现问题。这是因为子元素的位置是相对于父元素的，如果父元素的尺寸发生改变，那么子元素的位置也会受到影响。

为了解决这个问题，你可以尝试在父元素的尺寸发生改变时，重新计算子元素的位置。你可以使用 Vue 的 watch 监听器来监听父元素的尺寸变化，并在回调函数中重新计算子元素的位置。

以下是一个示例代码，假设你的父元素的宽度和高度分别由变量`parentWidth`和`parentHeight`控制，子元素的位置由变量`childPosition`控制：

watch: {
  parentWidth: function(newWidth, oldWidth) {
    let ratio = newWidth / oldWidth;
    this.childPosition.x *= ratio;
  },
  parentHeight: function(newHeight, oldHeight) {
    let ratio = newHeight / oldHeight;
    this.childPosition.y *= ratio;
  }
}

在上面的代码中，我们使用了 Vue 的 watch 监听器来监听父元素宽度和高度的变化。当父元素的宽度或高度发生改变时，我们通过计算比例来重新计算子元素的位置。具体来说，我们将子元素的 x 和 y 坐标乘以比例，从而使其保持在相对位置不变的同时适应新的父元素尺寸。