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
<!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> |
|
|