HTML5 drag and drop

Live Demo :

1 2 3 4

Source code :

css :

<style>
    .dropdiv {
        width: 50px;
        height: 50px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    .spn {
    font-size:50px
    }   
</style>

JAVASCRIPT :

<script>
    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));
    }
</script>

HTML :

<div>
    <div style="float: left">
        <span class="spn" id="drag1" draggable="true" ondragstart="drag(event)">1</span>
        <span class="spn" id="drag2" draggable="true" ondragstart="drag(event)">2</span>
        <span class="spn" id="drag3" draggable="true" ondragstart="drag(event)">3</span>
        <span class="spn" id="drag4" draggable="true" ondragstart="drag(event)">4</span>
    </div>
    <div style="float: left">
        <table>
            <tr>
                <td>
                    <div id="div1" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
                <td>
                    <div id="div2" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

                </td>
                <td>
                    <div id="div3" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

                </td>
                <td>
                    <div id="div4" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

                </td>
            </tr>
        </table>

    </div>

</div>