<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Drag Constraints Box Test</title>
<script type="text/javascript">
var djConfig = { isDebug: true /* , debugAtAllCosts: true */ };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
// dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript">
function init() {
var tests = 9;
var src = [];
for (var i=0;i<tests; i++) {
var tmpBox = dojo.byId("myContainer"+i);
var tmpDragMe = dojo.byId("dragMe"+i);
new dojo.dnd.HtmlDropTarget(tmpBox);
src[i] = new dojo.dnd.HtmlDragSource(tmpDragMe);
src[i].constrainTo(tmpBox);
}
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="myContainer0" style="position: absolute; left: 0px; top:30px; width:200px; height:200px; margin: 0px; padding: 0px; border: 1px solid blue;" >
1px;border, no margin, no padding
<div id="dragMe0" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer1" style="position: absolute; left: 250px; top:30px; width:200px; height:200px; margin: 0px; padding: 5px; border: 1px solid blue;" >
1px;border, no margin, 5px padding
<div id="dragMe1" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer2" style="position: absolute; left: 500px; top:30px; width:200px; height:200px; margin: 5px; padding: 5px; border: 1px solid blue;" >
1px border, 5px margin, 5px padding
<div id="dragMe2" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer3" style="position: absolute; left: 0px; top:300px; width:200px; height:200px; margin: 5px; padding: 0px; border: 1px solid blue;" >
1px border, 5px margin, no padding
<div id="dragMe3" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer4" style="position: absolute; left: 250px; top:300px; width:200px; height:200px; margin: 0px; padding: 5px; border: 5px solid blue;" >
5px border, no margin, 5px padding
<div id="dragMe4" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer5" style="position: absolute; left: 500px; top:300px; width:200px; height:200px; margin: 5px; padding: 0px; border: 5px solid blue;" >
5px border, 5px margin, no padding
<div id="dragMe5" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer6" style="position: absolute; left: 0px; top:600px; width:200px; height:200px; margin: 0px; padding: 0px; border: 0px solid blue;" >
0px border, no margin, no padding
<div id="dragMe6" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer7" style="position: absolute; left: 250px; top:600px;width:200px; height:200px; margin: 0px; padding: 5px; border: 0px solid blue;" >
0px border, no margin, 5px padding
<div id="dragMe7" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
<div id="myContainer8" style="position: absolute; left: 500px; top:600px; width:200px; height:200px; margin: 5px; padding: 5px; border: 0px solid blue;" >
0px border, 5px margin, 5px padding
<div id="dragMe8" style="border:1px solid red; width: 50px; height: 50px; padding:0px;">drag me</div>
</div>
</body>
</body>
</html>