JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<body>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
</body>

CSS

.draggable { 
    width: 90px; 
    height: 80px; 
    padding: 5px; 
    position:absolute;
    background:gold;
    border:1px solid #444;
}
.guide{
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

#guide-h{
    border-top: 1px dashed #55f; 
    width: 100%; 
}

#guide-v{
    border-left: 1px dashed #55f; 
    height: 100%; 
}

JavaScript

$(document).ready(function()
{
    for(i=0;i<10;i++)
    {//print some blocks
        $('<div/>').addClass('draggable').css({
            top:Math.floor((Math.random() * 400) + 1),
            left:Math.floor((Math.random() * 400) + 1),
            'background-color':'rgb('+Math.floor((Math.random() * 255) + 1)+','+Math.floor((Math.random() *                             255) + 1)+','+Math.floor((Math.random() * 255) + 1)+')'
         }).appendTo('body');
    }
    
    
    $(".draggable").draggable({
        snap: "div",
        stop:function(event, ui) { 
            $('#guide-h,#guide-v').hide();
        },
        drag: function(event, ui) 
        { 
            //var snapped = $(this).data('ui-draggable').snapElements; //## for new version of jquery UI
            var snapped = $(this).data('draggable').snapElements;
            /* Pull out only the snap targets that are "snapping": */
            var snappedTo = $.map(snapped, function(element) {
                //return element.snapping ? element.item : null;
                return element.snapping ? element : null;
            });
            if((snappedTo[0].left + snappedTo[0].width) == $(this).offset().left)
            {
                console.log('right of snapped item');
                $('#guide-v').css({'left': $(this).offset().left}).show();
            }else
            if((snappedTo[0].left)  == $(this).offset().left)
            {
                console.log('left  of snapped item');
                $('#guide-v').css({'left': $(this).offset().left}).show();
            }else if((snappedTo[0].left)  == $(this).offset().left + $(this).outerWidth())
            {
                $('#guide-v').css({'left': $(this).offset().left + $(this).outerWidth()}).show();
            }else $('#guide-v').hide();
            
            if((snappedTo[0].top)  == $(this).offset().top)
            {
                console.log('top  of snapped item');
                $('#guide-h').css({'top':...