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.
76 lines
3.5 KiB
76 lines
3.5 KiB
2 years ago
|
<!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>
|