How to make objects moveable?

[GoldenMerc]

Like on sulake.com site, But obviously not animated im wanting a object to move and be able to move by clicking and scrolling, Plus im wanting a part of the layout if clicked it closes down the tab or the browser (the X).
+Rep for help
Ross

[hamheyelliot]

First bit you could achieve nicely with jQuery UI- the 'draggable' function.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

in your header/footer.



<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>


Replace that #draggable with the ID of whatever needs to be dragged.

However, if you want to restrict the draggable object from leaving a certain boundary, it's:



<script>
$(function() {
$( "#draggable" ).draggable({ containment: "#stay-within-me" });
});
</script>


If I'm just boggling you in any way, or want some more detail/options, let me know :P

Some other people might have some better implementations to suggest for you but this is nice and solid.