cancel-middle-click.html (1796B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Drag and drop with middle click</title> 5 <style type="text/css"> 6 div { 7 width: 100px; 8 height: 100px; 9 background: orange; 10 float: left; 11 } 12 div + div { 13 background: blue; 14 } 15 div + div + div { 16 background: fuchsia; 17 } 18 ol { 19 clear: left; 20 } 21 </style> 22 <script type="text/javascript"> 23 window.onload = function () { 24 document.getElementsByTagName('div')[0].ondragstart = function (e) { 25 e.dataTransfer.effectAllowed = 'copy'; 26 e.dataTransfer.setData('text','dummy text'); 27 }; 28 }; 29 </script> 30 </head> 31 <body> 32 <div draggable="true"></div> 33 <div></div> 34 <div></div> 35 <noscript><p>Enable JavaScript and reload</p></noscript> 36 <ol> 37 <li>Drag the orange square over the blue square.</li> 38 <li>Without releasing the drag, click the middle mouse button.</li> 39 <li>If the platform's normal behaviour is to cancel a drag (eg. Windows and Unix+KDE), then the drag should be cancelled;<ul> 40 <li>The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> 41 <li>Move the mouse over the pink square and release the drag. The mouse cursor should remain the normal mouse cursor.</li> 42 </ul></li> 43 <li>If the platform's normal behaviour is not to cancel a drag (eg. Mac and Unix+Gnome), then the drag should not be cancelled;<ul> 44 <li>The drag placeholder should not disappear, and the cursor should be the no-drop cursor.</li> 45 <li>Move the mouse over the pink square and release the drag. The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> 46 </ul></li> 47 <li>Fail in either case if an inappropriate middle click function begins (eg. paste-and-go).</li> 48 </ol> 49 </body> 50 </html>