Implementing Drag-Based Area Selection, Resizing, and Moving with the Mouse

Oliveyoung developed its own promotional page production tool to improve the simple, repetitive markup work that arises from running over 100 promotional campaigns per month. The core goal is to move away from the existing hard-coding approach and increase work efficiency.

The implemented tool provides functionality to designate action areas via mouse drag, and to resize or move the position of those areas. Within a designated area, action types such as dropbox selection or text input can be set.

Technically, to prevent Repaint and Reflow, the tool uses translate and scale from the transform property instead of top and left. It also performs precise coordinate calculations by utilizing position properties of the mouse event object, such as pageX and pageY.