JSFiddle - React, Tailwind, and code Playground

by fedeleoncba

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div class="element" rel="1" row="1" col="1" style="top: 0px; left: 0px;">Something</div>

<div class="element" rel="2" row="1" col="2" style="top: 0px; left: 120px;">Something</div>

<div class="element" rel="3" row="2" col="1" style="top: 70px; left: 0px;">Something</div>

<div class="element" rel="4" row="2" col="2" style="top: 70px; left: 120px;">Something</div>

<div class="element" rel="5" row="3" col="1" style="top: 140px; left: 0px;">Something</div>

<div class="element" rel="6" row="3" col="2" style="top: 140px; left: 120px;">Something</div>

CSS

.element{
    position: absolute;
    width: 100px;
    min-height: 50px;
    height: 50px;
    background-color: red;
    text-align: center;
}

JavaScript

$.extend({
    updatePositions: function() {
        var update = 0;
        $(".element").resizable({
            handles: 's',
            start: function(event, ui) {
                event.stopPropagation();
                var el = $(this);
                var el_row = parseInt(el.attr("row"));
                var el_rel = parseInt(el.attr("rel"));
                var el_col = parseInt(el.attr("col"));
                update = $(".element").filter(function() {
                    return(
                        $(this).attr("row") > el_row &&
                        $(this).attr("col") == el_col &&
                        $(this).attr("rel") != el_rel
                    );
                    });
            },
            resize: function(event, ui) {
                update.each(function(event){
                    var top = $(this).position().top + $(this).height() + 20;
                    $(this).css("top", top )
                });
            }
        })
    }
});


$(document).ready(function(){
    $.updatePositions();
});