JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<form name="myform" id="myform" action="testme.php" method="post">
<table id="loc" border="1">       
    <tr>
        <td bgcolor=#000000 id="R1C1">
            <div ondrop="drop(event);" ondragover="allowDrop(event)">
                <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png"  
                ondragstart="drag(event);" id="1" draggable="true"/>
            </div>
        </td>
        <td id="R1C2">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
       <td bgcolor=#000000 id="R1C3">
            <div ondrop="drop(event);" ondragover="allowDrop(event)">
                <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png"  
            ondragstart="drag(event);" id="3" draggable="true"/> </div>
        </td>
        <td  id="R1C4">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
        
    </tr>
    
    <tr>
        <td id="R2C1">
            <div ondrop="drop(event);" ondragover="allowDrop(event)">
           </div>
        </td>
       <td bgcolor=#000000 id="R2C2">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
      <td id="R2C3">      
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
        <td bgcolor=#000000 id="R2C4">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
    </tr>
    
    <tr>
        <td bgcolor=#000000 id="R3C1">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
        <td id="R3C2">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
       <td bgcolor=#000000 id="R3C3">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
        </td>
        <td  id="R3C4">
            <div ondrop="drop(event);" ondragover="allowDrop(event)"></div>
  ...

CSS

div {width:32px;height:32px;}

JavaScript

function drag(ob)
{       
    ob.dataTransfer.setData("Text",ob.target.id);     
}

function drop(ob){
    var id = ob.dataTransfer.getData("Text");     
    var t = ob.target;    
    if (ob.target.nodeName == "IMG")
        t = ob.target.parentNode;
    t.innerHTML = "";
    var img = document.getElementById(id);
    t.appendChild(img);
    ob.preventDefault();    
}

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