JSFiddle - React, Tailwind, and code Playground

HTML

<div draggable="true" id="drag1">Drag me</div>


<br /><br /><br /><br /><br />
<button>Click to hide image divs and try to drag again - no image anymore</button>

<div id="img1"></div>

CSS

body {
    padding: 20px;
    overflow: hidden;
}

[draggable] {
    width: 50px;
    height: 50px;
    background: green;
}

#img1 {
    background-color: yellow;
    margin: 10px;
    width: 150px;
    height: 75px;
    border: solid 1px red;
    position:absolute;
    left:0;
}

JavaScript

var helper = $("#img1").get(0);

document.getElementById("drag1").addEventListener("dragstart", function(e) {
    e.dataTransfer.setDragImage(helper, 50, 50);
}, false);

//$("[draggable]").on("dragstart", function(e) {
//    console.log(e);
//    e.originalEvent.dataTransfer.setDragImage(helper, 50, 50);
//});

$("button").on("click", function() {
    $("#img1").css("left",1000-parseInt($("#img1").css("left")));
});