drag-with-div-or-image-as-data-image.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <html>
  2. <head>
  3. <title>Test for WebKit bug 24735: Poor setDragImage support on Windows</title>
  4. <style type="text/css">
  5. .draggable {
  6. -webkit-user-drag: element;
  7. -webkit-user-select: none;
  8. }
  9. #linkToUseAsImage {
  10. background-color: silver;
  11. }
  12. #divToUseAsImage {
  13. background-color: pink;
  14. }
  15. </style>
  16. <script type="text/javascript">
  17. function dragDivAndSeeImageDragged()
  18. {
  19. event.dataTransfer.setDragImage(document.getElementById("imgToUseAsImage"), event.pageX, event.pageY);
  20. }
  21. function dragImageAndSeeDivDragged()
  22. {
  23. event.dataTransfer.setDragImage(document.getElementById("divToUseAsImage"), event.pageX, event.pageY);
  24. }
  25. </script>
  26. </head>
  27. <body >
  28. <h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=24735'>WebKit bug 24735</a>: Poor setDragImage support on Windows</h3>
  29. <p>Instructions: </p>
  30. <p>When you drag the first div, the image under the cursor should be of the second image. </p>
  31. <p>When you drag the first image, the image under the cursor should be of the second div. </p>
  32. <br />
  33. <br />
  34. <div class="draggable" ondragstart="dragDivAndSeeImageDragged()"> Drag me, I am a div! (first div)</div>
  35. <br />
  36. <br />
  37. <img src="resources/webkit-background.png" class="draggable" ondragstart="dragImageAndSeeDivDragged()" />
  38. <br />
  39. <br />
  40. <img src="resources/drag-image.png" id="imgToUseAsImage" />
  41. <br />
  42. <br />
  43. <div id="divToUseAsImage"> When a drag is started on the image, this is the div that is used as the drag image! (second div)</div>
  44. </body>
  45. </html>