JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<body>
    <img id="drag1" src="http://files.myopera.com/supersagitta/Pokemon/BW_Sprites/Pikachu.gif" draggable="true" ondragstart="drag(event)">
    <div id="play1">
        <table border="1" class="play">
            <tr>
                <td>
                    <div id="div1" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
                <td>
                    <div id="div2" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
                <td>
                    <div id="div3" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="div4" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
                <td>
                    <div id="div5" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
                <td>
                    <div id="div6" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
            </tr>
        </table>
    </div>

CSS

.play {
    width: 100%;
    height: 100%;
}
.play td {
}
.play .room {
    width:100%;
    height:100%;
    border:1px solid #aaaaaa;
}
.left{
    background-color:blue;
}
.center{
    background-color:white;
}
.right{
    background-color:red;
}
#play1 {
    width:600px;
    height:300px;
    padding:10px;
}

JavaScript

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

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

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }