Moveable HTML Elements

I initially wrote this for an in-browser turn-based strategy game, as such things tend to be "gimmicky" for most other uses. However it is, nonetheless, very interesting and extremely fun.
Sadly, it is rather hackish and messy, but it is functional. Perhaps I will create a cleaner version at some later point.

Kudos to QuirksMode.org for much of the code. Go there for more excellent Javascript related information, as well as DOM and W3C information.

What we will need to do is: monitor our selected "window" for mouse-interactions - a single left-click to "grab" the window, then make positional adjustments according to any mouse movements.

We will additionally need to make cross-browser checks to ensure it works on (almost) all platforms.

window.js

Now, as for the HTML required(element must be of position absolute or fixed) - also, as it is done on this page, we must have a show/hide activation of the element:

<script type="text/javascript" src="window.js"></script>

<a href="javascript:;" onClick="display('window');">Show/Hide Element</a>

<div class="example" style="position:fixed;visibility:hidden;" id="window">
Hey, our floating window content! Click to select & move!
</div>

Additionally, one must set both "left" and "top" to the elements style.

The result should then be akin to the following: Show/Hide Element