<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>Dojo Button Widget 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.event.*"); function byId(id){ return document.getElementById(id); } function init(){ new dojo.dnd.HtmlDragMoveSource(byId("layer1")); new dojo.dnd.HtmlDragSource(byId("layer2")); new dojo.dnd.HtmlDragMoveSource(byId("layer3")); new dojo.dnd.HtmlDragMoveSource(byId("link1")); new dojo.dnd.HtmlDragMoveSource(byId("span1")); new dojo.dnd.HtmlDragMoveSource(byId("table1")); } dojo.addOnLoad(init); </script> <div id="layer1" style="border: 1px solid black;"> <ul> <li>list 1 item 1</li> <li>list 1 item 2</li> <li>list 1 item 3</li> </ul> </div> <ul id="layer2"> <li>list 2 item 1</li> <li>list 2 item 2</li> <li>list 2 item 3</li> </ul> <!-- 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: <ul id="layer3"> <li>list 3 item 1</li> <li>list 3 item 2</li> <li>list 3 item 3</li> </ul> </form> <a id="link1" href="javascript:alert('link was clicked')">a link</a> <span id="span1">a span</span> <table id="table1" border=1> <tr><td>i</td><td>'</td><td>m</td></tr> <tr><td>a</td><td>t</td><td>a</td></tr> <tr><td>b</td><td>l</td><td>e</td></tr> </table>