1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
<!doctype html>
<html>
<head>
<title>Modifier keys selecting dropEffect with 'link'</title>
<style type="text/css">
div:first-child {
height: 100px;
width: 100px;
background: orange;
display: inline-block;
}
div:first-child + div {
height: 100px;
width: 100px;
background: blue;
display: inline-block;
}
div:first-child + div + div {
height: 100px;
width: 100px;
background: fuchsia;
display: inline-block;
}
table {
display: inline-table;
margin-right: 1em;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
thead th {
background: silver;
color: black;
}
</style>
<script type="text/javascript">
window.onload = function () {
var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr;
var orange = document.getElementsByTagName('div')[0];
orange.ondragstart = function (e) {
e.dataTransfer.setData('text','http://example.com/');
e.dataTransfer.effectAllowed = 'link';
bde = bdo = bdo2 = fde = fdo = fdr = '';
};
var blue = document.getElementsByTagName('div')[1];
blue.ondragenter = function (e) {
e.preventDefault();
if( !bde ) { bde = e.dataTransfer.dropEffect; }
};
blue.ondragover = function (e) {
e.preventDefault();
if( !bdo ) {
bdo = e.dataTransfer.dropEffect;
}
//bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers
//test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2
bdo2 = e.dataTransfer.dropEffect;
};
var fuchsia = document.getElementsByTagName('div')[2];
fuchsia.ondragenter = function (e) {
e.preventDefault();
if( !fde ) { fde = e.dataTransfer.dropEffect; }
};
fuchsia.ondragover = function (e) {
e.preventDefault();
if( !fdo ) { fdo = e.dataTransfer.dropEffect; }
};
fuchsia.ondrop = function (e) {
e.preventDefault();
fdr = e.dataTransfer.dropEffect;
};
orange.ondragend = function (e) {
var ode = e.dataTransfer.dropEffect, temparray;
if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) {
if( bde == fdr ) {
tmparray = [fdr];
} else {
tmparray = [bde,fdr];
}
} else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) {
tmparray = [bde,fdo,ode];
} else {
tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode];
}
tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>';
document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>');
};
};
</script>
</head>
<body>
<div draggable="true"></div>
<div></div>
<div></div>
<div><strong> </strong></div>
<ol>
<li>Drag the orange square over the blue square</li>
<li>Press the relevant modifier keys for your platform</li>
<li>Continue dragging over the pink square</li>
<li>Release the drag, then the keys</li>
<li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li>
</ol>
<!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. -->
<!-- Anything else invalidates the modifiers, and reverts to default. -->
<table>
<caption>Windows</caption>
<thead>
<tr><th>Modifier</th><th>Drop effect</th></tr>
</thead>
<tbody>
<tr><td>None</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Shift</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Alt</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Alt</td><td><strong>link</strong></td></tr>
<tr><td>Alt+Shift</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr>
</tbody>
</table>
<!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. -->
<!-- Anything else is ignored completely, and has no effect on the modifier sequence. -->
<!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). -->
<!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. -->
<table>
<caption>Unix/Linux</caption>
<thead>
<tr><th>Modifier</th><th>Drop effect</th></tr>
</thead>
<tbody>
<tr><td><strong>none</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Shift</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Alt</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Alt</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Alt+Shift</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr>
</tbody>
</table>
<!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. -->
<!-- Anything else is ignored completely, and has no effect on the modifier sequence. -->
<table>
<caption>Mac</caption>
<thead>
<tr><th>Modifier</th><th>Drop effect</th></tr>
</thead>
<tbody>
<tr><td><strong>none</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl</td><td><strong>link</strong></td></tr>
<tr><td>Shift</td><td><strong>link</strong></td></tr>
<tr><td>Option/alt</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Command</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Option</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Ctrl+Command</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Shift+Command</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Command+Option</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr>
<tr><td>Ctrl+Shift+Command</td><td>link=>move=><strong>none</strong></td></tr>
<tr><td>Ctrl+Command+Option</td><td><strong>link</strong></td></tr>
<tr><td>Shift+Command+Option</td><td><strong>link</strong></td></tr>
<tr><td>Ctrl+Shift+Command+Option</td><td><strong>link</strong></td></tr>
</tbody>
</table>
<noscript><p>Enable JavaScript and reload</p></noscript>
</body>
</html>
|
