I have a draggable rectangle on a page. I would like to drag the rectangle around the screen area in both portrait and landscape and not allow it to go off screen.

Currently, I have my draggable rectangle working in portrait mode, now how do I achieve this in landscape mode?, when I turn the phone, the rectangle is often 'off screen' either totally or a just a little, so how do I keep it on screen in landscape orientation as well as portrait?

Clearly, I want to keep my rectangle as draggable in both screen orientations, so the rectangle cannot be anchored...or can it?, I have tried with different positioning methods, but all prevent my rectangle from being draggable.

It would also be nice if my rectangle could have a 'starting' position, like screen center, but again, all attempts have failed because I want to keep the rectangle, draggable. Currently, the rectangle appears at the top left of my screen in portrait.

I looked at an app from coderus, that being ScreenTapShot2, for some 'mouse trick' clues, but I am still none the wiser, any ideas/input appreciated.