Assume you have n objects (or nodes) on the page and the screen viewport is 800x600px. For the purposes of this project, you are required to implement an alignment feature where as a user, I can drag and drop items and it will automatically align to the closest node. I can drag items to the left, right, up or down. You can assume that a node is an object on the page of various shapes and sizes with a bounding box consisting of the widest length and height of the shape. Observe the circle and oblong shapes below.
enter image description here When a user is moving a node in the page, the node can align to: ● other nodes: ○ Left ○ Right ○ Center ● the page ○ Left ○ Right ○ Center