I have an element on a web page that can a user can drag, but I need to make it so they won't be able to drag it past the edges of the screen. The main container is centered horizontally and the draggable element uses absolute positioning.

I know how to detect the window width across various browsers, but I'm not quite sure how to stop the element on the left and right sides. For some reason, the draggable element's left 0 position is located at the left side of the container (instead of the left side of the window).

Can someone point me in the right direction as to how to accomplish this?