<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Dojo DnD parent position test</title>
<style type="text/css"> body { margin: 50px; } </style>
<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.HtmlDragMove");
dojo.require("dojo.widget.DebugConsole");
dojo.require("dojo.widget.ResizeHandle");
dojo.require("dojo.event.*");
function init(){
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer1"));
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer2"));
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer3"));
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer4"));
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer5"));
new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer6"));
}
dojo.addOnLoad(init);
</script>
<p>Make sure that all can be dragged nicely.</p>
<p>Remember to check that it works when the window is scrolled!</p>
<p>a</p>
<p>b</p>
<p>c</p>
<!-- test for positioning bug if object is inside a form (that isn't at the top left of the body -->
<form>
This list is inside a form: Drag should Not start from top left of screen.
<ul id="layer3">
<li>list 3 item 1</li>
<li>list 3 item 2</li>
<li>list 3 item 3</li>
</ul>
</form>
<div>
This list is inside a div
<ul id="layer5">
<li>list 5 item 1</li>
<li>list 5 item 2</li>
</ul>
</div>
<div>
This list is inside a div, and the list itself is relative positioned
<ul id="layer6" style="position:relative; left:100px;">
<li>list 5 item 1</li>
<li>list 5 item 2</li>
</ul>
</div>
<form style="position:relative; left:200px;">
This list is also inside a form which is relative positioned.
<ul id="layer1">
<li>list 1 item 1</li>
<li>list 1 item 2</li>
<li>list 1 item 3</li>
</ul>
</form>
<div style="position:relative; left:250px; height: 100px; background-color:yellow">
<form>
This list is inside a form, which is inside a relative positioned div
<ul id="layer2">
<li>list 2 item 1</li>
<li>list 2 item 2</li>
<li>list 2 item 3</li>
</ul>
</form>
</div>
<div style="position:absolute; top:100px; left:300px; height: 100px; background-color:red">
<form style="position:relative; left:50px">
This list is inside a relative-postioned form, which is inside an absolute positioned div
<ul id="layer4">
<li>list 4 item 1</li>
<li>list 4 item 2</li>
<li>list 4 item 3</li>
</ul>
</form>
</div>
<div style="position:relative; left:200 px">
<p>a debug conosle inside a relative div</p>
<div dojoType="DebugConsole"
title="Debug Console"
style="width: 600px; height: 200px; left: 200px;"
hasShadow="true"
resizable="true"
displayCloseAction="true"
layoutAlign="client"
>
</div>
</div>
<p>a debug console in body</p>
<div dojoType="DebugConsole"
title="Debug Console"
style="width: 600px; height: 200px; left: 200px;"
hasShadow="true"
resizable="true"
displayCloseAction="true"
layoutAlign="client"
>
</div>