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%;
    width:100%;
}
[drop="true"] {
    height:100px;
    width:400px;
    margin:5px;
    border:1px solid #CCC
}
.drop:hover {
    background-color:red;
}
.selected {
    background-color:green !important;
}
.a {
    margin:1px;
    border:1px solid #F2F2F2;
    cursor:move;
}
#currentDrag {
    border:2px dashed yellow;
    position:absolute;
    height:30px;
    overflow:auto;
    width:100px;
    z-index:999;
}

JavaScript

$(document).on('click', function (e) {
    var target = e.target;
    if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
});
$(document).delegate('.a', 'dblclick', function (e) {
    $(this).addClass('selected');
});

$(document).delegate('.selected', 'mousedown', function (e) {
    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);
});

$(document).on('mouseup', function (e) {
    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 > targPos.top) && (mPos.y < (pos.top + tht))) {
        $(this).append($('#currentDrag').html());
    }
    $('.drop .selected').removeClass('selected');
    $('#currentDrag').remove();
});
$('.drop').on('mouseup', function (e) {
    $(tgt).append($('#currentDrag').html());
    $('.drop .selected').removeClass('selected');
    $('#currentDrag').remove();
});

$(document).on('mousemove', function (e) {
    $('#currentDrag').css({
        left: e.pageX + "px",
        top: e.pageY + "px"
    });
});