JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<div class="parent container">
  <img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
  <img class="imgGhost" src="https://placehold.it/137x137" />
</div>
<div class="parent container">
  <img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
  <img class="imgGhost" src="https://placehold.it/212x212" />
</div>

CSS

.element {
  width: 100px;
  height: 100px;
}
.imgGhost {
  position: absolute;
  visibility: hidden;
}

JavaScript

var elements = document.querySelectorAll(".element");

for (element of elements) {
  element.addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.position = 'fixed';
    div.style.top = '-1000000px';
    div.style.left = '-1000000px';
    div.style.border = '2px solid red';

    img.src = this.parentNode.querySelector(".imgGhost").src;
    img.style.width = '100px';
    img.style.height = '100px';
    div.appendChild(img);
    document.body.appendChild(div);
    e.dataTransfer.setData('text', 'test');
    e.dataTransfer.setDragImage(div, 0, 0);
  }, false);
}