drag-cursor-notallowed.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <html>
  2. <head>
  3. <style>
  4. #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
  5. #dropTarget {width: 256px; height: 256px; border: 1px dashed}
  6. #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
  7. .pass { font-weight: bold; color: green; }
  8. .fail { font-weight: bold; color: red; }
  9. </style>
  10. <script>
  11. var dragMe;
  12. var dropTarget;
  13. var messageElm;
  14. var defaultMessageElm;
  15. var event;
  16. var ALLOWED_EFFECTS = 'move';
  17. var DROP_EFFECT = 'copy';
  18. window.onload = function()
  19. {
  20. dragMe = document.getElementById("dragMe");
  21. dropTarget = document.getElementById("dropTarget");
  22. messageElm = document.getElementById("message");
  23. defaultMessageElm = document.getElementById("default-message");
  24. if (!dragMe || !dropTarget || !messageElm || !defaultMessageElm)
  25. return;
  26. dragMe.ondragstart = dragStart;
  27. dragMe.ondragend = dragEnd;
  28. dropTarget.ondragenter = dragEntered;
  29. dropTarget.ondragover = dragOver;
  30. dropTarget.ondrop = drop;
  31. }
  32. function dragStart(e)
  33. {
  34. event = e;
  35. e.dataTransfer.effectAllowed = ALLOWED_EFFECTS;
  36. e.dataTransfer.setData('Text', e.target.textContent);
  37. }
  38. function dragEnd(e)
  39. {
  40. messageElm.style.visibility = "hidden";
  41. defaultMessageElm.style.visibility = "visible";
  42. return;
  43. }
  44. function dragEntered(e)
  45. {
  46. messageElm.style.visibility = "visible";
  47. defaultMessageElm.style.visibility = "hidden";
  48. dragEnteredAndUpdated(e);
  49. }
  50. function dragOver(e)
  51. {
  52. dragEnteredAndUpdated(e);
  53. }
  54. function dragEnteredAndUpdated(e)
  55. {
  56. event = e;
  57. e.dataTransfer.dropEffect = DROP_EFFECT;
  58. cancelDrag(e);
  59. }
  60. function drop(e)
  61. {
  62. cancelDrag(e);
  63. }
  64. function cancelDrag(e)
  65. {
  66. if (e.preventDefault)
  67. e.preventDefault();
  68. else {
  69. // Assume this script is executing within Internet Explorer
  70. e.returnValue = false;
  71. }
  72. }
  73. </script>
  74. </head>
  75. <body>
  76. <p id="description">This test can be used to verify that the not-allowed cursor is shown during an invalid drag-and-drop operation.
  77. In particular, if the effectAllowed is <code><script>document.write(ALLOWED_EFFECTS)</script></code> and the dropEffect of the
  78. drop target is <code><script>document.write(DROP_EFFECT)</script></code> then the drop is not allowed and the cursor should
  79. change to the not-allowed cursor. Note, this test only pertains to the Windows build since the Mac build does not show a drop cursor
  80. for a not-allowed drop operation (see bug #25925).
  81. <br/><br/>
  82. Drag the red square over the drop target (demarcated by the dashed boundary). While hovering over the drop target, if the cursor
  83. is <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw=="> then the test <span class="pass">PASSED</span>. Otherwise, the test <span class="fail">FAILED</span>.</p>
  84. <div id="test-container">
  85. <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code>
  86. <br/><br/>
  87. <div id="dropTarget">
  88. <div id="default-message">Drag the red square over me.<br/><br/>
  89. <label for="dropEffect">Expects dropEffect:</label> <code><script>document.write(DROP_EFFECT)</script></code>
  90. </div>
  91. <div id="message" style="visibility:hidden">The cursor should be <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw==">. Is it?</div>
  92. </div>
  93. <hr/>
  94. <p>Items that can be dragged to the drop target:</p>
  95. <div id="dragMe" draggable="true">Square</div>
  96. <hr/>
  97. </div>
  98. </body>
  99. </html>