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.
112 lines
3.0 KiB
112 lines
3.0 KiB
2 years ago
|
<!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>
|
||
|
|
|