JSFiddle - React, Tailwind, and code Playground

HTML

<div id="totalParent">
    <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>
    <div class="d" id="drop1"></div>
</div>

CSS

.d {
    height:100px;
    width:400px;
    margin:5px;
    border:1px solid #CCC;
}
.selected {
    background-color:green;
}
.a {
    margin:1px;
    border:1px solid #F2F2F2;
    cursor:move;
}
#currentDrag {
    background: yellow;
    border:2px dashed yellow;
    cursor:move;
    opacity: 0.7;
    position:absolute;
    z-index: 100;
}

JavaScript

$(document).on('dblclick', '.a', function (e) {
    $(this).toggleClass('selected');
});

$(document).on('mousedown', '.selected', function (e) {
    var div = $('<div id="currentDrag"></div>');
    $('.selected').each(function () {
        div.append($(this).clone(true));
    });
    var p = $('body').offset();
    var l = e.pageX - p.left;
    var t = e.pageY - p.top;
    console.log(l, ', ', t);
    $('body').append(div);
    $('#currentDrag').css({
        left: l,
        top: t
    });

});

$(document).on('mouseup', '.selected', function (e) {
    $('.d').each(function (index, item) {
        var $i = $(item);
        if (e.pageX >= $i.offset().left && e.pageX <= $i.offset().left + $i.width() && e.pageY >= $i.offset().top && e.pageY <= $i.offset().top + $i.height()) {
            console.log('Dropped');
            var $cl = $('#currentDrag').find('>*').clone(true);
            $i.append($cl);
        }
    });
    $('.selected').removeClass('selected');
    $('#currentDrag').remove();
});

$(document).on('mousemove', function (e) {
    var p = $('body').offset();
    $('#currentDrag').css({
        left: e.pageX - p.left,
        top: e.pageY - p.top
    });
});