JSFiddle - React, Tailwind, and code Playground

HTML

<div class="with-data-stuff">
    <div draggable="true">Data 1</div>
    <div draggable="true">Data 2</div>
    <div draggable="true">Data 3</div>
    <div draggable="true">Data 4</div>
</div>

<div class="without-data-stuff">
    <div draggable="true">No data 1</div>
    <div draggable="true">No data 2</div>
    <div draggable="true">No data 3</div>
    <div draggable="true">No data 4</div>
</div>

CSS

div[class] { margin-bottom: 5em; }

JavaScript

var draggyAndOrDroppyEvents = "dragstart drag dragover dragenter dragleave drop dragend".split(' ');

[].forEach.call(document.querySelectorAll(".with-data-stuff [draggable]"), function(el) {
    draggyAndOrDroppyEvents.forEach(function(e) {
        el.addEventListener(e, doItWithData);
    });
});

[].forEach.call(document.querySelectorAll(".without-data-stuff [draggable]"), function(el) {
    draggyAndOrDroppyEvents.forEach(function(e) {
        el.addEventListener(e, noDataForMe);
    });
});

function doItWithData(e) {
    console.log(e.type);
    if ("dragover" === e.type)
        e.preventDefault();
    if ("dragstart" === e.type && e.dataTransfer) {
        e.dataTransfer.setData("text", "datalol");
    }
}

function noDataForMe(e) {
    console.log(e.type);
    if ("dragover" === e.type)
        e.preventDefault();
}