JSFiddle - React, Tailwind, and code Playground
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
function CacheType(){
corrtop = 0;
rel = 0;
}
$.extend({
updatePositions: function() {
var update = 0;
var arr = new Array();
$(".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"));
var ex = el.position().top;
var ey = el.height();
update = $(".element").filter(function() {
if(
$(this).attr("row") > el_row &&
$(this).attr("col") == el_col &&
$(this).attr("rel") != el_rel
){
var tmp = new CacheType();
tmp.corrtop = $(this).position().top - ex - ey;
tmp.rel = $(this).attr('rel');
arr.push(tmp);
return true;
}else{
return false;
}
});
},
resize: function(event, ui) {
var x = $(this).height() + $(this).position().top;
update.each(function(event){
for(var i=0;i<arr.length; i++){
var tmp = arr[i];
var rel = $(this).attr('rel');
if(rel == tmp.rel)
$(this).css("top", x + tmp.corrtop);
}
});
}
})
}
});
$(document).ready(function(){
$.updatePositions();
});