JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<div id="draggable" class="draggable ui-widget-content">
    <p> Snap Test 1 </p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
    <p> Snap Test 2 </p>
</div>

<div id="draggable3" class="draggable ui-widget-content">
    <p> Snap Test 3 </p>
</div>

CSS

#draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }

#draggable2 { width: 120px; height: 100px; padding: 5px; float: left;  margin: 0 10px 10px 0; font-size: .9em; }

#draggable3 { width: 150px; height: 120px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }

JavaScript

// Time to hide guide lines
var linesTimeout = null;

// Draw alignment lines for selector
buildAllAlignLines = function(selector) {
    $(selector).each(
        function (index) {
            buildAlignLines($(this))            
        }
    );
};

// Build alignment line for element        
buildAlignLines = function(t) {
    // Append to target element parent
    appendTo = t.parent();
    id = t.attr('id');
    if (!document.getElementById("drag_verLine1_"+id)) {
        ver = $('<div id="drag_verLine1_'+id+'" class="drag_alignLines" style="position:absolute; height: 100%; width: 3px; top: 0px; left: '+(t.position().left)+'px;">');
        $(appendTo).append(ver);
    }
    if (!document.getElementById("drag_verLine2_"+id)) {
        ver = $('<div id="drag_verLine2_'+id+'" class="drag_alignLines" style="position:absolute; height: 100%; width: 3px; top: 0px; left: '+(t.position().left+t.innerWidth())+'px;">');
        $(appendTo).append(ver);
    }
    if (!document.getElementById("drag_horLine1_"+id)) {
        hor = $('<div id="drag_horLine1_'+id+'" class="drag_alignLines" style="position:absolute; width:100%; height: 3px; left: 0px; top: '+(t.position().top)+'px;">');        
        $(appendTo).append(hor);
    }
    if (!document.getElementById("drag_horLine2_"+id)) {
        hor = $('<div id="drag_horLine2_'+id+'" class="drag_alignLines" style="position:absolute; width:100%; height: 3px; left: 0px; top: '+(t.position().top+t.innerHeight())+'px;">');        
        $(appendTo).append(hor);
    }
};

// Remove all align lines
removeAllAlignLines = function(t) {
    $(".guide_alignLines").remove();
}

// Remove aligment lines from an element    
removeAlignLines = function(t) {
    id = t.attr('id');
    $(document.getElementById("drag_verLine1_"+id)).remove();
    $(document.getElementById("drag_verLine2_"+id)).remove();
    $(document.getElementById("drag_horLine1_"+id)).remove();
    $(document.getElementById("drag_horLine2_"+id)).remove();
}
    
//...