JSFiddle - React, Tailwind, and code Playground

by kommandoss

HTML

<table border="1">
    <tr>
        <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event);">
                <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true"/>
            </div>
        </td>
       <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png"  ondragstart="drag(event);" id="b" draggable="true"/> </div>
        </td>
       <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png"  ondragstart="drag(event);" id="c" draggable="true"/> </div>
        </td>
    </tr>
    
    <tr>
        <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png"  ondragstart="drag(event);" id="d" draggable="true"/> </div>
        </td>
        <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png"  ondragstart="drag(event);" id="f" draggable="true"/> </div>
        </td>
       <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png"  ondragstart="drag(event);" id="g" draggable="true"/> </div>
        </td>
    </tr>
    
    <tr>
        <td>
            <div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png"  ondragstart="drag(event);" id="h" draggable="true"/> </div>
        </td>
       <td>
            <div ondrop="drop(event);"...

CSS

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

JavaScript

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

function drop(ev)
{
    var id = ev.dataTransfer.getData("Text");
    if (!$(ev.currentTarget).find("img")[0])
        ev.target.appendChild(document.getElementById(id));
    ev.preventDefault();
}

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