UNPKG

2.9 kBHTMLView Raw
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4 <title>Dojo DnD with handles test</title>
5 <style type="text/css">
6 @import "../../resources/dojo.css";
7 @import "../../resources/dnd.css";
8 @import "dndDefault.css";
9
10 body { padding: 1em; background: #ededed; }
11
12 .container { width: 100px; display: block; }
13 .container.handles .dojoDndHandle { background: #fee; }
14 .clear { clear: both; }
15 </style>
16
17 <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script>
18
19 <script type="text/javascript">
20 require(["dojo/parser", "dojo/dnd/Source", "dojo/domReady!"], function(parser){
21 parser.parse();
22 });
23 </script>
24</head>
25<body>
26 <h1 class="testTitle">Dojo DnD with handles test</h1>
27
28 <p>Following selection modes are supported by default:</p>
29 <ul>
30 <li>Simple click &mdash; selects a single element, all other elements will be unselected.</li>
31 <li>Ctrl+click &mdash; toggles a selection state of an element (use Meta key on Mac).</li>
32 <li>Shift+click &mdash; selects a range of element from the previous anchor to the current element.</li>
33 <li>Ctrl+Shift+click &mdash; adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
34 </ul>
35 <p>Following drop modes are supported by default:</p>
36 <ul>
37 <li>Simple drop &mdash; moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li>
38 <li>Ctrl+drop &mdash; copies elements to the valid target (use Meta key on Mac).</li>
39 </ul>
40
41 <p>Source with handles. Items should be draggable by the "em" of the word "Item" (and also see a 'move' cursor on it).</p>
42 <div data-dojo-type="dojo/dnd/Source" data-dojo-id="c1" withHandles="true" class="container handles">
43 <div class="dojoDndItem"><span class="dojoDndHandle"><span class="dojoDndIgnore">It</span>em</span> <strong>Alpha</strong></div>
44 <div class="dojoDndItem"><span class="dojoDndHandle"><span class="dojoDndIgnore">It</span>em</span> <strong>Beta</strong></div>
45 <div class="dojoDndItem"><span class="dojoDndHandle"><span class="dojoDndIgnore">It</span>em</span> <strong>Gamma</strong></div>
46 <div class="dojoDndItem"><span class="dojoDndHandle"><span class="dojoDndIgnore">It</span>em</span> <strong>Delta</strong></div>
47 </div>
48
49 <p>Source without handles.</p>
50 <div data-dojo-type="dojo/dnd/Source" data-dojo-id="c2" class="container">
51 <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div>
52 <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div>
53 <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div>
54 <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div>
55 </div>
56
57 <p>HTML after</p>
58
59</body>
60</html>