JSFiddle - React, Tailwind, and code Playground

HTML

<div id="totlaParent">
    <div id="parent">
        <div class="a" drag="true">123</div>
        <div class="a" drag="true">456</div>
        <div class="a" drag="true">789</div>
        <div class="a" drag="true">256</div>
        <div class="a" drag="true">678</div>
    </div>
    <div drop="true" id="drop1" class="drop"></div>
    <div drop="true" id="drop2" class="drop"></div>
    <div drop="true" id="drop3" class="drop"></div>
</div>

CSS

#totlaParent {
    position:relative;
    height:100%;
}
[drop="true"] {
    height:100px;
    width:400px;
    margin:5px;
    border:1px solid #CCC;
    overflow: auto;
}
.selected {
    background-color:green !important;
}
.a {
    margin:1px;
    border:1px solid #F2F2F2;
    cursor:move;
}
#currentDrag {
    border:2px dashed yellow;
    position:absolute;
    max-height:100px;
    overflow:auto;
    width:100px;
    z-index:999;
}
.onDrop{
    background-color:red;
}

JavaScript

$(document).on('click', '.a', function (e) {
   $(this).removeClass('selected');
});
$(document).on('dblclick', '.a', function (e) {
    $(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
    var dragMode = true;
    var div = $('<div></div>');
    $('.selected').each(function () {
        div.append($(this).clone());
    });
    div.prop('id', 'currentDrag');
    $('#currentDrag').css({
        left: e.pageX + "px",
        top: e.pageY + "px"
    });
    $('body').append(div);
    //disable selection on dropping start
    disableSelection();
    $(document).on('mousemove.drop', function(e){
       onDragging(e, dragMode);
    });
    $(document).on('mouseup.drop', function(e){
       onDragEnd(e, dragMode);
    });
});
function onDragEnd(e, dragMode){
    if(!dragMode)
       return;
    var tgt = e.target;
    var mPos = {
        x: e.pageX,
        y: e.pageY
    };
    $('.drop').each(function () {
        var pos = $(this).position(),
            twt = $(this).width(),
            tht = $(this).height();
         if((mPos.x > pos.left) && 
            (mPos.x < (pos.left + twt)) && 
            (mPos.y > pos.top) && 
            (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
    });
   
    $('.drop .selected').removeClass('selected');
    $('#currentDrag').remove();
    $('.onDrop').removeClass('onDrop');
    //remove listener on docuemnt when drop end
    $(document).off('mousemove.drop');
    $(document).off('mouseup.drop');
    //enable selection
    enableSelection();
}    
function onDragging(e, dragMode){
    if(!dragMode)
       return;
    var p = $('body').offset();
    var mPos = {
        x: e.pageX,
        y: e.pageY
    }; 
    $('#currentDrag').css({
        left: mPos.x,
        top: mPos.y
    });
     $('.drop').each(function () {
        var pos = $(this).position(),
            twt = $(this).width(),
            tht = $(this).height();
        ...