Dockable Toolbar

Question

I have an area in my application that contains toolbar, my toolbar is consist of movable canvas, that I can drag and drop it anywhere, what I want to do is to restrict the user and not allow the toolbar to be moved out of this area, and make it dockable so I can dock it to the left, right, top and bottom of this specified area,

can anyone help me in this case?

bellow snapshot show the toolbar is highlighted by red and the restricted area is highlighted by black this area the user can't move the toolbar out

Here is the snapshot

Answer 1

You can reset the toolbar's position after a drag operation is completed.

First get the toolbar's coordinate which is relative to the Canvas, then translate it to coordinate relative to the bound (black area).

You can then calculate how close the toolbar's center is from each edge of the bound. If the distance is lower than a defined value, move the toolbar to the edge (to dock it), you need to rotate the toolbar 90 degrees if you dock it to the left and right edges.

Something like this.