JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

<script src=http://code.jquery.com/jquery-1.5.min.js></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
</head>
<body>
<div id="area">
<div id="pos1"></div>
<div id="pos2"></div>
<div id="pos3"></div>
<div id="pos4"></div>
<div id="pos5"></div>
</div>
</body>
</html>

CSS

#area 
{
    position: relative;
    display:block;
    width:650px;
    height:650px; 
    background:green;
}


#area div
{
    position: absolute;
    display:block;
    width: 30px;
    height:30px; 
    background: red;
   }

JavaScript

var positions = $("#area").children();
var i = 0;

        positions.each(function(pos)
        {
            i+=60;
            
            $(this).css({'left':'30','top': i });
        });

        positions.draggable({ 
        
        opacity: 0.6, 
        helper: 'clone',
        cursor: "move",
        containment: 'parent', 
        scroll: false,
        snap: false,
        revert: false,
        zIndex: 2700,
        drag:function(event, ui)
            { 
            }
        });

        positions.droppable({
        
            drop: function(event, ui)
            {
                alert('Dropped')
            }
        });