JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<div id='background'></div>
<div id='draggable' draggable='true'>Drag me around</div>

CSS

#background {
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

#draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    z-index: 2;
}

JavaScript

var element = document.getElementById('draggable');

element.addEventListener('dragstart', function (evt) {
// We'll handle this event so first stop bubbling up
evt.stopPropagation();

// Now setup our dataTransfer object properly
// First we'll allow a move action — this is used for the cursor
evt.dataTransfer.effectAllowed = 'move';

// Setup some dummy drag-data to ensure dragging
evt.dataTransfer.setData('text/plain', 'some_dummy_data');

// Now we'll create a dummy image for our dragImage
var dragImage = document.createElement('div');
dragImage.setAttribute('style', 'position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; background: red; z-index: -1');
document.body.appendChild(dragImage);

// And finally we assign the dragImage and center it on cursor
evt.dataTransfer.setDragImage(dragImage, 20, 20);
});