JSFiddle - React, Tailwind, and code Playground

by jado66

HTML

<!DOCTYPE html>
<html>
<head></head>

<body>
    <table style="border-spacing: 5px;">
        <tr>
            <td >
                <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div class = "gate" style="background-color: rgb(93, 151, 75); border: 1px solid black;"  
                        ondragstart="dragStart(event)" id="1" draggable="true" >
                    </div> 
                </div>
            </td>
            <td >
                <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div class = "gate" style="background-color: rgb(207, 233, 94); border: 1px solid black;"  
                        ondragstart="dragStart(event)" id="2"  draggable="true" >
                    </div> 
                </div>
            </td>
        </tr>
    </table>
    <hr>
    <table id="blockTable" >
        <tr >
            <td id="cellToClone"> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
            <td> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
            <td> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
            <td> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
            <td> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
            <td> <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="toggleBorder(event)" ondragenter="toggleBorder(event)"></div></td>
        </tr>
        <tr>
            <td> <div class =...

CSS

.cell {width:50px;height:50px;}
.gate {width:50px;height:50px;cursor: move;}
#blockTable td:hover{background: #dedede;}
#blockTable {
    border-spacing: 5px;
    border: 1px solid #dedede;
}
#newColCanvas{
    border-spacing: 5px;
}
#newRowCanvas{
    border-spacing: 5px;
}
#newColNRowCanvas{
    border-spacing: 5px;
}
.gate:hover{
    transform: scale(1.05);
    transition-duration: 0.3s;
}
.droppable{background:  #dedede; border: 1px dotted grey;}
#blockTable tbody { height:300px; overflow-y:auto;  }

JavaScript

function dragStart(evt)
{
    evt.dataTransfer.setData("Text",evt.target.id);
}

function drop(evt)
{
    evt.target.classList.toggle("droppable");
    evt.preventDefault();
    var data = evt.dataTransfer.getData("Text");
    evt.target.appendChild(document.getElementById(data));
    // document.getElementById("demo").innerHTML = "The p element was dropped";

    newGate = null;
}

function toggleBorder(evt){
    evt.target.classList.toggle("droppable");
}

function allowDrop(ob)
{
    ob.preventDefault();
}