JSFiddle - React, Tailwind, and code Playground

by jefferyto

HTML

<div class="draggable" draggable="true">Drag me 1</div>
<div class="draggable" draggable="true">Drag me 2</div>
<div class="draggable" draggable="true">Drag me 3</div>
<div id="dragTarget">Drag here</div>

CSS

.draggable {
  cursor: move;
  padding: 10px;
  background: cyan;
  display: inline-block;
}
#dragTarget {
  padding: 10px;
  border: 1px dashed #333;
  display: inline-block;  
}

JavaScript

var draggable = document.querySelectorAll('.draggable');
var dragTarget = document.getElementById('dragTarget');

var dragging = {};

for (var i = 0, l = draggable.length; i < l; i++) {
    draggable[i].addEventListener('dragstart', function(e) {
        var dragId = this.dragId;

        if (!dragId) {
            dragId = this.dragId = (Math.random() + '').replace(/\D/g, '');
        }

        dragging[dragId] = dragging[dragId] || { element: this, count: 0 };
        dragging[dragId].count++;

        e.dataTransfer.setData('text/html', dragId);
        e.dataTransfer.setData('dnd/' + dragId, dragId);

        console.log('dragstart: "' + this.innerHTML + '" (' + dragId + ')');
    });

    draggable[i].addEventListener('dragend', function(e) {
        var data = dragging[this.dragId];
        if (data) {
            data.count--;
            if (!data.count) {
                dragging[this.dragId] = null;
            }
        }
    });
}

dragTarget.addEventListener('dragenter', function(e) {
    var types = e.dataTransfer.types, l = types.length, i = 0, match, el;

    for ( ; i < l; i++) {
        match = /^dnd\/(\w+)$/.exec(types[i].toLowerCase());

        if (match) {
            el = dragging[match[1]].element;

            console.log('dragenter: "' + el.innerHTML + '" (' + el.dragId + ')');

            e.preventDefault();
            return false;
        }
    }
});