javascript - How to implement the drag-and-drop function of jquery ui to stop drag-and-drop when certain conditions are met

Question

As shown in the picture, I can drag the small dot in the lower right corner to zoom the image. Since the zoom function of jquery ui cannot be satisfied, I wrote this myself. Now I need to drag the small dot in the lower right corner to the image. When it reaches the 2 position, it can no longer continue to drag in the upper left direction. How to achieve this? I've been searching online for a long time but haven't found a way to stop dragging. Please give me some advice

Answer 1

Conjecture: During the dragging process, you can monitor events, detect the length and width of the dragging box, and stop dragging when it reaches a certain level