JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div class="image" draggable="true"></div>

CSS

.image {
    background: pink;
    width: 100px;
    height: 100px;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

JavaScript

var draggable = document.querySelector('.image');

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');
    
canvas.width = canvas.height = 100;
    
context.fillRect(0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL('image/png');
    
var image = new Image();
image.src = dataURL;

draggable.addEventListener('dragstart', function (event) {
    event.dataTransfer.effectAllowed = 'move';

    event.dataTransfer.setData('text/plain', 'Data to Drag');
    event.dataTransfer.setDragImage(image, canvas.width / 2, canvas.height / 2);
});

draggable.addEventListener('dragend', function (event) {

});