ON the UI that I’m designing, I have a page and there could be multiple rectangles on the page like shown below:
A page can be selected by clicking on its boundary. Similarly, a rectangle can be selected by clicking on its boundary. But if a rectangle is of same size as page, how will user select between page and rectangle since both will have the same boundary at that time.
Also currently I can drag objects to page or rectangle. How will this be done if both have same boundaries?
Provide some feedback on which is selected. The IDE I use frequently obviously does this with an object inspector that allows setting properties for the controls on the form. It changes its data when you click a control on the form, but you can also change the selection in that list to change the selected control on the form.
You could have a dropdown or list box that changes its selection when a different rectangle is selected.
Apart from mouse selection on the boundary of controls and the use of the dropdown or list box, you could also consider using the tab and esc keys to switch between controls. For example [tab] to select the next control in the tab order, and [esc] to select the parent (container) of the current control.
For drag drop operations you need to make it very clear to the user what the effect of the drop action will be. You could provide the user with labeled areas to drag to. For example, you could provide an "add to page" area where users can drop items. I can't really comment on the selections part of your question without more information on your use case (unless I copy paste Marjan's answer).
