You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.5 KiB
75 lines
3.5 KiB
<!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>
|
|
|