JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<div id="portlets" class="portlets">
    <div class="halfContainer container A">
        <div class="innerContainer">1</div>
    </div>
    <div class="halfContainer container B">
        <div class="innerContainer">2</div>
    </div>
    <div class="fullContainer container C">
        <div class="innerContainer">3</div>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
}
div {
    margin:0;
    padding:0;
    border:0;
}
.fullContainer {
    float:left;
    width:100%;
    background-color:#dedede;
}
.halfContainer {
    float:left;
    width:50%;
    background-color:#cecece;
}
.innerContainer {
    margin:10px;
    cursor:pointer;
    background-color:white;
    height:250px;
}
.placeholderContainer {
    float:left;
    background-color:transparent;
}
.placeholderContainer .innerContainer {
    margin:9px;
    background-color:none;
    border:1px dotted red;
}

.A { background-color: #55cccc; }
.B { background-color: #cc55cc; }
.C { background-color: #cccc55; }

.A .innerContainer { background-color: #ddffff; }
.B .innerContainer { background-color: #ffddff; }
.C .innerContainer { background-color: #ffffdd; }

JavaScript

(function ($) {

    $.overlaps = function ( a, b, tolerence ) {

        function getPositions( elem ) {
            var pos, width, height;
            pos = $( elem ).offset(); // .position();
            width = $( elem ).width();
            height = $( elem ).height();
            return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
        }

        function comparePositions( p1, p2, tolerence ) {
            var r1, r2;
            if (tolerence === undefined) tolerence = 0;
            r1 = p1[0] < p2[0] ? p1 : p2;
            r2 = p1[0] < p2[0] ? p2 : p1;
            return r1[1] - tolerence > r2[0] || r1[0] === r2[0];
        }

        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0], tolerence ) && comparePositions( pos1[1], pos2[1], tolerence );

    };

})(jQuery);




$(document).ready(function () {

    var $draggableContainer = $('#portlets'),
        $placeholder = $('<div class="placeholderContainer container"><div class="innerContainer"></div></div>');
    
    $draggableContainer    
    .on('dblclick', '.innerContainer', function (event) {
        var $container = $(event.target).closest('.container'),
            $portlet = $container.closest('.portlets'),
            o = $container.offset(),
            d = {
                left: event.pageX - o.left,
                top: event.pageY - o.top
            };
        
        $placeholder
            .insertAfter($container)
            .removeClass('fullContainer halfContainer')
        .addClass($container.hasClass('fullContainer') ? 'fullContainer':'halfContainer');

        $container
            //.detach()
            //.appendTo('body')
            .css({
                position:'absolute',
                opacity:0.7
            })
            .offset({
                left: o.left,
                top: o.top
            });
        
        $(document)
           ...