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.
58 lines
1.7 KiB
58 lines
1.7 KiB
<!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> |
|
<title>Drag-and-drop test</title> |
|
<script type="text/javascript"> |
|
var djConfig = { |
|
isDebug: true |
|
//, debugAtAllCosts: true |
|
}; |
|
</script> |
|
<script type="text/javascript" src="../../dojo.js"></script> |
|
<!--<script type="text/javascript" src="../../src/dnd/HtmlDragCopy.js"></script>--> |
|
<script type="text/javascript"> |
|
|
|
dojo.require("dojo.dnd.HtmlDragCopy"); |
|
|
|
dojo.addOnLoad(function() { |
|
// list one |
|
var dl = dojo.byId("dragList1"); |
|
var lis = dl.getElementsByTagName("li"); |
|
for(var x=0; x<lis.length; x++){ |
|
new dojo.dnd.HtmlDragCopySource(lis[x], "li1", x == 1); |
|
} |
|
// list two |
|
var dl = dojo.byId("dragList2"); |
|
new dojo.dnd.HtmlDropTarget(dl, ["li1"]); |
|
var lis = dl.getElementsByTagName("li"); |
|
for(var x=0; x<lis.length; x++){ |
|
new dojo.dnd.HtmlDragSource(lis[x], "li1"); |
|
} |
|
}); |
|
|
|
</script> |
|
<style type="text/css"> |
|
.move li { cursor: move; } |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>Drag-and-drop test</h1> |
|
|
|
<p>The first list is a source of items for the second list. Items will be copied to the target (rather than being moved, like normal).</p> |
|
|
|
<ul id="dragList1" class="move"> |
|
<li>list 1 item 1 (dragging the clone will create a new copy)</li> |
|
<li>list 1 item 2 (dragging the clone will move it)</li> |
|
<li>list 1 item 3 (dragging the clone will create a new copy)</li> |
|
</ul> |
|
|
|
<p>This is the second list (drag items from the top down here and they will be cloned, and a clone of the object will be added to this list)</p> |
|
|
|
<ul id="dragList2" class="move"> |
|
<li>list 2 item 1</li> |
|
<li>list 2 item 2</li> |
|
<li>list 2 item 3</li> |
|
</ul> |
|
</body> |
|
</html>
|
|
|