TouTouJS - Javascript Framework

<div id="containerDiv" style="position:relative; background-color:#AAAAAA; width:600px; height:300px;">
<div id="dragableDiv1" style="width:300px; background-color:#FFFFFF; border:1px solid;">
This box is dragable too...<br><br>

... but not beyond its container's borders...
</div>
<br><br><br><br><br>
<div id="dragableDiv2"
tt_dnd_style="boundary-top:top; boundary-left:right; boundary-bottom:none; boundary-right:right 30;"
style="width:300px; background-color:#FFFF00; border:1px solid;">
This box is dragable too...<br><br>

... but not beyond its container's top border...<br>
... and only a little beyond the right border...<br>
... and not completely out of the left border...<br><br>
... but as far as you wish downwards...<br>
</div>
</div>

<script>
/*
* initialisations
*/
toutou.require("toutou.html.dom");
toutou.require("toutou.html.dnd");
initDemo();

/*
* initialisations
*/
function initDemo() {
var containerDiv = tt$("containerDiv");

// dragableDiv1
var dragableDiv = tt$("dragableDiv1");
toutou.html.dnd.setDragable(dragableDiv);
dragableDiv.tt_dnd.container = containerDiv;

// dragableDiv2
var dragableDiv = tt$("dragableDiv2");
toutou.html.dnd.setDragable(dragableDiv);
dragableDiv.tt_dnd.container = containerDiv;
}
</script>