JSFiddle - React, Tailwind, and code Playground

HTML

<div class="allowed">Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1. Div 1.</div>
<br/>
<br/>
<br/>
<br/>
<div class="allowed">Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow. Allow.</div>
<br/>
<br/>
<br/>
<br/>
<div class="disallowed">Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow. Disallow. Diallow.</div>

JavaScript

var divs = Array.prototype.slice.call(document.getElementsByTagName("div"));
divs.forEach(function (x) {
    x.draggable = "true";
    x.style.border = "solid";
    x.ondragstart = function (e) {
        e.dataTransfer.effectAllowed = 'move'
        e.dataTransfer.dropEffect = 'move';
    };

    x.ondragleave = function (e) {
        e.dataTransfer.dropEffect = 'move';
        e.stopPropagation();
        e.preventDefault();
    };

    x.ondragenter = x.ondragover = function (e) {
        var effect = (" " + x.className + " ").indexOf(" allowed ") > -1 ? "move" :
            "none";
        console.log(effect);
        e.dataTransfer.dropEffect = effect;
        e.stopPropagation();
        e.preventDefault();
    };
});