JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<script src="https://gist.github.com/raw/869292/0397ffacd60e8ce96021809243ae9d649b1c5ceb/widget.dnd.MultiAreaManager.js"></script>
<html>
<head>
    
</head>
<body class="claro" style="width:600px;">
<div id="a1" class="dojoxDndArea" style="height:500px;border: 1px solid red;" onMouseOver="console.log('over a1');" onMouseOut="console.log('over a1');">
    <div id="a2" class="dojoxDndArea" style="height:400px;border: 1px solid green;">
        <div id="a3" class="dojoxDndArea" style="height:100px;border: 1px solid blue;">
        </div>
        <div id="a4" class="dojoxDndArea" style="height:200px;border: 1px solid pink;">
        </div>
    </div>
<div class="dndItem simpleBlock">
     <div id="dndMe" class="dragHandle">Drag me around please 1</div>
 </div>
     <div id="dndMe" class="dragHandle">Drag me around please 2</div>
 </div>
<div id="a666" class="dojoxDndArea" style="height:200px;border: 1px solid yellow;">
     <div id="dndMe" class="dragHandle">Drag me around please 3</div>
</div>
</body>
</html>

CSS

/**********************************oaf.base.dnd************************************/
.dragNode{
    z-index:10000;
    cursor:move;
}
.dragHandle{
    cursor:move;
}
.dropIndicator{
    position:relative;
    height:50px;
    border:1px dashed #FFF;
}
.dropIndicator > div{
    position:absolute;
    left:0;top:0;right:0;bottom:0;    
    background-color:#000;
    opacity:0.17; 
    filter:alpha(opacity=17); 
    -khtml-opacity:0.17; 
    -moz-opacity:0.17;
}
.dj_ie6 .dropIndicator div{
    position:relative;
    height:100%;
    background-color:#000;
    filter:alpha(opacity=17); 
}
.dj_ie6 .dropIndicator{
    _margin:10px;
}
.dndCover{
    background-image:url(../../layout/resources/icons/pixel.gif);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:1000px;
    z-index:9999;
    cursor:move;
}

.dndCover2{
    z-index: 10001;
}
.dragNode{
    z-index:10000;
    cursor:move;
}
.dragHandle{
    cursor:move;
}
.dropIndicator{
    position:relative;
    height:50px;
    border:1px dashed #FFF;
}
.dropIndicator > div{
    position:absolute;
    left:0;top:0;right:0;bottom:0;    
    background-color:#000;
    opacity:0.17; 
    filter:alpha(opacity=17); 
    -khtml-opacity:0.17; 
    -moz-opacity:0.17;
}
.dj_ie6 .dropIndicator div{
    position:relative;
    height:100%;
    background-color:#000;
    filter:alpha(opacity=17); 
}
.dj_ie6 .dropIndicator{
    _margin:10px;
}
.dndCover{
    background-image:url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:1000px;
    z-index:9999;
    cursor:move;
}

.dj_ie6 .orange .dndCover, .dj_ie7 .orange .dndCover{
    background-image:url(../../images/oaf/pixel.gif);
}

.orange .dndCover2{
    z-index: 10001;
}

.dojoxDndArea{
    width: 80%;
    margin : 10px;
}

#dndMe{
    width: 180px;
    height: 18px;
    color : #ffffff;
    background-color : #000000;
    border : 2px dashed #FF0000;
}

JavaScript

dojo.require('widget.dnd.MultiAreaManager');

dojo.addOnLoad(
    function(){
        
        var m = widget.dnd.multiAreaManager();
         m.areaClass = "dojoxDndArea";
         m.dragHandleClass = "dragHandle";
        dojo.query('.dojoxDndArea').forEach(
            function(area){
                m.registerByNode(area);
            },
            this
        );
   
    }

);