JSFiddle - React, Tailwind, and code Playground

by Suraj Raj Shrestha

HTML

<table class="tblFrame" cellpadding="0px" cellspacing="0px">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<div class="rtype" id="divFiller" priority="1">
    <span class="btnClose">x</span>
    A</div>
<div class="rtype" id="divBonus" priority="2"><span class="btnClose">x</span>B</div>
<div class="rtype" id="divCross" priority="3"><span class="btnClose">x</span>C</div>
<div class="rtype" id="divNonFixed" priority="4"><span class="btnClose">x</span>D</div>
<div class="rtype" id="divFixed" priority="5"><span class="btnClose">x</span>E</div>

CSS

.tblFrame{ border: 1px solid green; z-index:10; }
.tblFrame td{ position:relative; width: 85px; height: 110px; border: 1px solid green; z-index:10;}
.rtype{ display: inline-block; width: 85px; height: 110px; background-color: blue; text-align: center; margin-top: 10px; position:relative; }
#divFiller{ background-color: #ffeedd; }
#divBonus{ background-color: #abcedf; }
#divCross{ background-color: #bbccdd; }
#divNonFixed{ background-color: #445566; }
#divFixed{ background-color: #123456;}
.btnClose{background-color: grey; left: 0; top: 0; height:16px; width: 16px; display:block; position:absolute; padding-bottom: 4px; cursor:pointer;}
.btnClose:hover{background-color: yellow; color:blue;}

JavaScript

var canOverlap=false;
var divClone;
var priority=0;

$('.rtype').on('click', function(){
    divClone= $(this).clone();
    priority = $(this).attr('priority');
});

$('.tblFrame').on('click', 'td', function(){    
    if($(this).find(".rtype").length===0){
        $(this).append($(divClone));
        $(divClone).css({
            position: 'absolute',
            left: '0px',
            top: '-10px',
            'z-index': 1
        });  
    }
    else
    {
        if($(this).find('.rtype:last-child').attr('priority') < priority)
        {
            $(this).append($(divClone));
            $(divClone).css({
                'z-index': 2,
                position: 'absolute',
                left: '0px',
                top: '-10px',
            });
        }
        else
        {
            alert("Unable to overwrite.");
        }
    }
});

$('.tblFrame td').on('click', '.btnClose', function(e){
    e.preventDefault();
    $(this).closest('div').remove();
    var parent = $(this).parent('td');
    if($(parent).find('.rtype').length===0)
    {
        priority=0;
        divClone="";
    }
    else
    {
        priority=$(parent).find('.rtype:last-child').attr('priority')
    }
});