| <!DOCTYPE html> |
| <html> |
| <meta name="viewport" content="width=device-width"> |
| <head> |
| <style> |
| body, html { |
| width: 100%; |
| height: 100%; |
| } |
| |
| body { |
| margin: 0; |
| } |
| |
| #red { |
| background-color: red; |
| width: 300px; |
| height: 100px; |
| } |
| |
| #green { |
| background-color: green; |
| width: 300px; |
| height: 100px; |
| } |
| |
| #blue { |
| background-color: blue; |
| width: 300px; |
| height: 100px; |
| } |
| |
| #cyan { |
| background-color: cyan; |
| width: 300px; |
| height: 100px; |
| } |
| </style> |
| </head> |
| |
| <div id="red" draggable="true"></div> |
| <div id="green" draggable="true"></div> |
| <div id="blue" draggable="true"></div> |
| <div id="cyan" draggable="true"></div> |
| <img id="icon" src="icon.png"></img> |
| <div><code>To manually test, attempt to drag each of the colored blocks.</code></div> |
| |
| <script> |
| red.addEventListener("dragstart", event => { |
| event.dataTransfer.setDragImage(icon, 0, 0); |
| event.dataTransfer.setData("text/plain", "red"); |
| }); |
| |
| green.addEventListener("dragstart", event => { |
| event.dataTransfer.setDragImage(icon, 100, 100); |
| event.dataTransfer.setData("text/plain", "green"); |
| }); |
| |
| blue.addEventListener("dragstart", event => { |
| let image = new Image(); |
| image.src = icon.src; |
| event.dataTransfer.setDragImage(image, 0, 0); |
| event.dataTransfer.setData("text/plain", "blue"); |
| }); |
| |
| cyan.addEventListener("dragstart", event => { |
| event.dataTransfer.setData("text/plain", "cyan"); |
| }); |
| </script> |
| </html> |
