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