Draggable Windows with Javascript
27 July 2007
A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.
First, we need to create the window div. Here is the CSS I used.
.window {
background: #d8e7fe;
position: absolute;
top: 200px;
left: 200px;
width: 350px;
padding: 1px;
-moz-border-radius: 7px;
border: 2px solid #21416d;
}
.window h1 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
padding: 6px;
display: block;
background-color: #9cc6ff;
font-size: 13px;
margin: 0px;
}
And here is the HTML markup.
<div id="mywindow" class="window">
<h1>Example Window</h1>
<p>Click and drag this window around the webpage.</p>
</div>
I've used '-moz-border-radius' for rounded corners because I'm lazy. You'll need to use corner images if you want rounded corners that work in more than one browser.
Now all that's left to do is the javascript. As I said before, we'll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.
Once you've got the library installed, add this short Javascript snippet to the head section of your document.
<script type="text/javascript">
function init(){
new Draggable('mywindow');
}
Event.observe(window, 'load', init, false);
</script>When the page loads, the init() function is called, which tells the library to make the div 'mywindow' draggable!
Matt Cox
Check out: http://prototype-window.xilinus.com/