JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<div id="thing" draggable="true">DRAG ME</div>

JavaScript

function onDragStart(event){

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    
    canvas.width = 100;
    canvas.height = 20;
    canvas.style.position = 'absolute';
    canvas.style.left = '-100px';
    document.body.append(canvas);
    
    context.fillStyle = '#333333';
		context.fillRect(0, 0, canvas.width, canvas.height);
    
    context.fillStyle = '#999999';
    context.font = 'bold 13px Arial';
    context.fillText('DRAGGING...', 5, 15);

    event.dataTransfer.setData('text', 'lorem ipsum');
    event.dataTransfer.effectAllowed = 'copy';    
    event.dataTransfer.setDragImage(canvas, -15, 9);
    
};


var theThing = document.getElementById('thing');
theThing.addEventListener('dragstart', onDragStart, false);