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.
228 lines
10 KiB
228 lines
10 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Dojo DnD test</title> |
|
<style type="text/css"> |
|
@import "../../resources/dojo.css"; |
|
@import "../../resources/dnd.css"; |
|
@import "dndDefault.css"; |
|
@import "../../../util/doh/robot/robot.css"; |
|
|
|
body { |
|
padding: 1em; |
|
background: #ededed; |
|
} |
|
|
|
.container { |
|
width: 100px; |
|
display: block; |
|
} |
|
|
|
.clear { |
|
clear: both; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/aspect", "dojo/parser", "dojo/topic", "dojo/dnd/Source", "dojo/domReady!" |
|
], function(aspect, parser, topic, Source){ |
|
parser.parse().then(function(){ |
|
var c1 = new Source("container1"); |
|
c1.insertNodes(false, [1, "A", [1, 2, 3], |
|
function(x){ return x + x; }, |
|
{toString: function(){ return "CUSTOM!"; }}, |
|
null]); |
|
|
|
// example subscribe to events |
|
topic.subscribe("/dnd/start", function(source){ |
|
console.debug("Starting the drop", source); |
|
}); |
|
topic.subscribe("/dnd/drop/before", function(source, nodes, copy, target){ |
|
if(target == c1){ |
|
console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before); |
|
} |
|
}); |
|
topic.subscribe("/dnd/drop", function(source, nodes, copy, target){ |
|
if(target == c1){ |
|
console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before); |
|
} |
|
}); |
|
aspect.after(c4, "onDndDrop", function(source, nodes, copy, target){ |
|
if(target == c4){ |
|
console.debug(copy ? "Copying from" : "Moving from", source); |
|
} |
|
}, true); |
|
}); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1 class="testTitle">Dojo DnD test</h1> |
|
|
|
<p>Elements of both sources/targets were created dynamically.</p> |
|
<p>Following selection modes are supported by default:</p> |
|
<ul> |
|
<li>Simple click — selects a single element, all other elements will be unselected.</li> |
|
<li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> |
|
<li>Shift+click — selects a range of element from the previous anchor to the current element.</li> |
|
<li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li> |
|
</ul> |
|
<p>Following drop modes are supported by default:</p> |
|
<ul> |
|
<li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li> |
|
<li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li> |
|
</ul> |
|
|
|
<div id="dragLists"> |
|
<div style="float: left; margin: 5px;"> |
|
<h3>Source 1</h3> |
|
<div id="container1" class="container"></div> |
|
</div> |
|
<div style="float: left; margin: 5px;"> |
|
<h3>Source 2 (copyOnly)</h3> |
|
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="c2" class="container" copyOnly="true"> |
|
<div class="dojoDndItem">Item <strong>X</strong></div> |
|
<div class="dojoDndItem">Item <strong>Y</strong></div> |
|
<div class="dojoDndItem">Item <strong>Z</strong></div> |
|
</div> |
|
</div> |
|
<div style="float: left; margin: 5px;"> |
|
<h3>Source 3</h3> |
|
<script type="dojo/require"> |
|
dnd: "dojo/dnd/common" |
|
</script> |
|
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="c3" class="container" allowNested="true"> |
|
<script type="dojo/method" data-dojo-event="creator" data-dojo-args="item, hint"> |
|
// this is custom creator, which changes the avatar representation |
|
var node = document.createElement("div"), s = String(item); |
|
node.id = dnd.getUniqueId(); |
|
node.className = "dojoDndItem"; |
|
node.innerHTML = (hint != "avatar" || s.indexOf("Item") < 0) ? |
|
s : "<strong style='color: darkred'>Special</strong> " + s; |
|
return {node: node, data: item, type: ["text"]}; |
|
</script> |
|
<div class="dojoDndItem">Item <strong>Alpha</strong></div> |
|
<div class="nested"> |
|
<div class="dojoDndItem">Item <strong>Beta</strong></div> |
|
<div class="dojoDndItem">Item <strong>Gamma</strong></div> |
|
<div class="dojoDndItem">Item <strong>Delta</strong></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="float: left; margin: 5px;"> |
|
<h3>Source 4 (copyOnly, selfAccept, delay=8)</h3> |
|
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="c4" class="container" copyOnly="true" selfAccept="false" delay="8"> |
|
<div class="dojoDndItem">Item 1</div> |
|
<div class="dojoDndItem">Item 2</div> |
|
<div class="dojoDndItem">Item 3</div> |
|
</div> |
|
</div> |
|
<div style="float: left; margin: 5px;"> |
|
<h3>Pure Target 5</h3> |
|
<div data-dojo-type="dojo/dnd/Target" data-dojo-id="c5" class="container"> |
|
<div class="dojoDndItem">One item</div> |
|
</div> |
|
</div> |
|
<div class="clear"></div> |
|
</div> |
|
|
|
<p>HTML after</p> |
|
<p> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin |
|
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. |
|
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. |
|
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae |
|
risus. |
|
</p> |
|
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem |
|
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in |
|
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In |
|
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra |
|
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, |
|
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut |
|
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla |
|
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut |
|
semper velit ante id metus. Praesent massa dolor, porttitor sed, |
|
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit |
|
tortor pharetra congue. Suspendisse pulvinar. |
|
</p> |
|
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam |
|
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque |
|
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus |
|
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus |
|
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis |
|
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, |
|
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent |
|
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti |
|
sociosqu ad litora torquent per conubia nostra, per inceptos |
|
hymenaeos. |
|
</p> |
|
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique |
|
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel |
|
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices |
|
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per |
|
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio |
|
luctus eleifend. Proin massa libero, ultricies non, tincidunt a, |
|
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, |
|
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at |
|
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id |
|
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt |
|
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat |
|
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam |
|
consectetuer dapibus eros. Aliquam nisl. |
|
</p> |
|
|
|
<p> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin |
|
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. |
|
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. |
|
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae |
|
risus. |
|
</p> |
|
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem |
|
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in |
|
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In |
|
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra |
|
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, |
|
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut |
|
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla |
|
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut |
|
semper velit ante id metus. Praesent massa dolor, porttitor sed, |
|
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit |
|
tortor pharetra congue. Suspendisse pulvinar. |
|
</p> |
|
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam |
|
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque |
|
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus |
|
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus |
|
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis |
|
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, |
|
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent |
|
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti |
|
sociosqu ad litora torquent per conubia nostra, per inceptos |
|
hymenaeos. |
|
</p> |
|
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique |
|
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel |
|
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices |
|
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per |
|
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio |
|
luctus eleifend. Proin massa libero, ultricies non, tincidunt a, |
|
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, |
|
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at |
|
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id |
|
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt |
|
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat |
|
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam |
|
consectetuer dapibus eros. Aliquam nisl. |
|
</p> |
|
</body> |
|
</html>
|
|
|