JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<form id="form1">
    <div class="inputs">
            <div>1</div>
            <div>2</div>
            <div>3</div>    
            <div>4</div>
            <div>5</div>
            <div>6</div>

    </div>
    <br/>
    <table class="spaces">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</form>

CSS

.block {
    z-index:9999;
    cursor:move;
}

.productCode {

}

li {
    list-style:none;
}
tr {
    border: 2px solid black;
}
table {
    border: 2px solid black;
}

.inputs div {
    float:left;
    background-color:#FFFFFF;
    color:#004E66;
    font-size:x-large;
    margin:2px;
    padding:20px;
    border:1px solid black;
}

.spaces td {
    background-color:#666666;
    width:80px;
    height:80px;            
    border:2px solid black;
}

.spaces td div {
    margin:0 auto;
    width:150px;
    height:70px;
}

JavaScript

$(document).ready(function () {
    $('<div></div>').appendTo('.spaces td');
    $(".inputs div").draggable({
        snap: ".spaces td div",
        snapMode:'inner'
    });  
});