Set parent-child object drag limit in fabric.js - fabricjs

Question

How can I set drag limit relative to either parent or child object ? In my current implementation, dragging is not smooth.
When you try to drag close to the edges, it breaks and stops moving. Instead, it should keep dragging on the available space.
You can see demo here: https://jsfiddle.net/xorbmoon/3ruaL9gs/114/
I have tried this, but it is not an optimal solution.
const loadImageFromURL = (src) => {
return new Promise((resolve) => {
const image = new Image();
image.src = src;
image.crossOrigin = "Anonymous";
image.onload = () => {
resolve(image);
};
});
}
const IMAGE = "https://images.pexels.com/photos/670741/pexels-photo-670741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
const canvas = new fabric.Canvas("canvas", {
width: 1200,
height: 800,
preserveObjectStacking: true
})
const init = async () => {
const imageElement = await loadImageFromURL(IMAGE);
const image = new fabric.Image(imageElement, {
scaleX: 0.25,
scaleY: 0.25,
angle: 80,
left: 400
})
const cropper = new fabric.Rect({
id: "cropper",
absolutePositioned: true,
lockScalingFlip: true,
lockMovementX: true,
lockMovementY: true,
selectable: false,
evented:false,
top: 40,
left: 200,
fill:"red",
height: 100,
width: 300,
angle: 80
})
canvas.add( image, cropper)
const updatePosition = () => {
image.setCoords()
cropper.setCoords();
const isIn = cropper.isContainedWithinObject(image);
if(!isIn){
if(image._stateProperties){
image.left = image._stateProperties.left;
image.top = image._stateProperties.top;
}
} else {
image.setCoords();
image.saveState();
}
}
image.on("moving", updatePosition)
}
init()