diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue index 465a3d2..7c1d0e1 100644 --- a/src/components/vue-draggable-resizable.vue +++ b/src/components/vue-draggable-resizable.vue @@ -251,6 +251,7 @@ export default { parentHeight: null, handle: null, + realHandle: null, enabled: this.active, resizing: false, dragging: false, @@ -455,6 +456,7 @@ export default { } else { this.handle = handle } + this.realHandle = handle; this.resizeEnable = true @@ -656,7 +658,11 @@ export default { ) if (this.lockAspectRatio && this.resizingOnY) { - right = this.right - (this.bottom - bottom) * aspectFactor + if (this.realHandle.includes("r")) { + right = this.right - (this.bottom - bottom) * aspectFactor; + } else { + left = this.left - (this.bottom - bottom) * aspectFactor; + } } } else if (this.handle.includes('t')) { top = restrictToBounds( @@ -666,7 +672,11 @@ export default { ) if (this.lockAspectRatio && this.resizingOnY) { - left = this.left - (this.top - top) * aspectFactor + if (this.realHandle.includes("r")) { + right = this.right - (this.top - top) * aspectFactor; + } else { + left = this.left - (this.top - top) * aspectFactor; + } } } @@ -678,7 +688,11 @@ export default { ) if (this.lockAspectRatio && this.resizingOnX) { - bottom = this.bottom - (this.right - right) / aspectFactor + if (this.realHandle.includes("b")) { + bottom = this.bottom - (this.right - right) / aspectFactor; + } else { + top = this.top - (this.right - right) / aspectFactor; + } } } else if (this.handle.includes('l')) { left = restrictToBounds( @@ -688,7 +702,11 @@ export default { ) if (this.lockAspectRatio && this.resizingOnX) { - top = this.top - (this.left - left) / aspectFactor + if (this.realHandle.includes("b")) { + bottom = this.bottom - (this.left - left) / aspectFactor; + } else { + top = this.top - (this.left - left) / aspectFactor; + } } }