JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<div>
    <div id="tst1" class='droppable_category'>
      name
    </div>
    <div id="tst2" class='droppable_category'>
      name
    </div>
    <div id="tst3" class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
</div>
<br class='clear'/>
<div id='column_1_count' class='droppable_bucket' data-input='cat1'>
</div>
<div id='column_2_count' class='droppable_bucket' data-input='cat2'>
</div>  
<!--<div id='column_3_count' class='droppable_bucket' data-input='cat3'>
</div>
<div id='column_4_count' class='droppable_bucket' data-input='cat4'>
</div>
<div id='column_5_count' class='droppable_bucket' data-input='cat5'>
</div>
<div id='column_6_count' class='droppable_bucket' data-input='cat6'>
</div>-->
<form id="inputs">
    <input type="" value="0" id="cat1"/>
    <input type="" value="0" id="cat2"/>
    <!--<input type="" value="0" id="cat3"/>
    <input type="" value="0" id="cat4"/>
    <input type="" value="0" id="cat5"/>
    <input type="" value="0" id="cat6"/>-->
</form>

CSS

.droppable_category {
    background-color: #eee;
    margin: 10px;
}
.droppable_bucket {
    background-color: #ccc;
    margin: 10px;
    height: 20px;
}

JavaScript

$( ".droppable_category" ).draggable({ revert: "invalid" });

$( ".droppable_bucket" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        var currentHeight = $(this).height();
        var relatedInput = $(this).data('input');
        var catCount = parseInt($("#"+relatedInput).val(), 10);
        //$( this )
//.addClass( "ui-state-highlight" )
           // .height(currentHeight+25);
        $("#"+relatedInput).val(++catCount); 
        console.log( $(this).attr('id') )
        console.log( ui.helper.attr('id') );
    }
});