| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body, html { width: 100%; height: 100%; margin: 0; } |
| #draggable { |
| width: 300px; |
| height: 100px; |
| background-color: cornflowerblue; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="draggable" draggable="true">Drag me</div> |
| <script> |
| window.dragEventCount = 0; |
| window.dragOverEventCount = 0; |
| |
| draggable.addEventListener("dragstart", event => { |
| event.dataTransfer.setData("application/x-custom", "test-data"); |
| }); |
| |
| draggable.addEventListener("drag", () => { |
| window.dragEventCount++; |
| }); |
| |
| document.body.addEventListener("dragover", event => { |
| window.dragOverEventCount++; |
| event.preventDefault(); |
| }); |
| </script> |
| </body> |
| </html> |
