<!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>