- list 1 item 1
- list 1 item 2
- list 1 item 3
- list 2 item 1
- list 2 item 2
- list 2 item 3
a link a span
i | ' | m |
a | t | a |
b | l | e |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">...
var djConfig = ...{ isDebug: true };
</script>
<script type="text/javascript" src="dojo-0.4/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.event.connect(dojo, "loaded", "init");
</script>
<title>Dragging-2</title>
</head>
<body>
<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>
<p><a id="link1" href="#">a link</a>
<span id="span1">a span</span></p>
<p> </p>
<table width="269" height="88" border=1 bordercolor="#0000FF" id="table1">
<tr><td width="48">i</td>
<td width="48">'</td>
<td width="151">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>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">...
var djConfig = ...{ isDebug: true };
</script>
<script type="text/javascript" src="dojo-0.4/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.event.connect(dojo, "loaded", "init");
</script>
<title>Dragging-2</title>
</head>
<body>
<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>
<p><a id="link1" href="#">a link</a>
<span id="span1">a span</span></p>
<p> </p>
<table width="269" height="88" border=1 bordercolor="#0000FF" id="table1">
<tr><td width="48">i</td>
<td width="48">'</td>
<td width="151">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>
</body>
</html>