JSFiddle - React, Tailwind, and code Playground

by jeschafe

HTML

<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;
        margin:2px;
        width:184px;
        height: 99px;
        border:2px solid black;
}

JavaScript

$(document).ready(function () {


$(".inputs div").draggable( {
        opacity: .4,
        create: function(){$(this).data('position',$(this).position())},
        cursorAt:{left:15},
        cursor:'move',
        start:function(){$(this).stop(true,true)}
   });
  
     $('.spaces').find('td').droppable({
         drop:function(event, ui){
             snapToMiddle(ui.draggable,$(this));
         }
     });

 }); 


function snapToMiddle(dragger, target){
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}