| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body, html { width: 100%; height: 100%; margin: 0; } |
| #draggable { |
| width: 300px; |
| height: 100px; |
| background-color: salmon; |
| } |
| #tiny { position: absolute; width: 1px; height: 1px; } |
| </style> |
| </head> |
| <body> |
| <div id="draggable" draggable="true">Drag me</div> |
| <img id="tiny" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> |
| <script> |
| window.dragStartFired = false; |
| |
| draggable.addEventListener("dragstart", event => { |
| var img = document.getElementById("tiny"); |
| img.remove(); |
| event.dataTransfer.setDragImage(img, 0, 0); |
| event.dataTransfer.setData("text/plain", "test"); |
| window.dragStartFired = true; |
| }); |
| |
| document.body.addEventListener("dragover", event => event.preventDefault()); |
| </script> |
| </body> |
| </html> |
