JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="draggable_area">
    <div id="big_block">
        <div id="middle_block">
            <div class="draggable">Тащи меня!</div>
        </div>
    </div>
</div>

CSS

#draggable_area {
    display: inline-block;
}
#big_block {
    width: 450px;
    height: 450px;
    border: 1px solid #900;
}
#middle_block {
    width: 250px;
    height: 250px;
    border: 1px solid #900;
    margin: 10px;
    padding: 10px;
}
.draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #036;
    line-height: 100px;
    text-align: center;
    color: #000;
}

JavaScript

$('#big_block').droppable({
    accept: ".draggable",
    drop: function(event, ui) {
        var cloneBlock = $(ui.draggable);
        var topPos = ui.position.top; // позиция сверху
        var leftPos = ui.position.left; // позиция слева
        // вставляем клон в большой блок с указанными координатами
        cloneBlock.css({
                top: topPos,
                left: leftPos
            }).appendTo('#big_block');
        cloneBlock.parent(':not(#big_block)').remove(); // удаляем, если надо, родителя
    }
});

$('.draggable').draggable({
    containment: '#draggable_area',
    helper: 'clone',
    start: function(event, ui){
        // задаем родительскому элементу прозрачный фон, шрифт и рамку
        $(this).parent(':not(#big_block)').css({
            backgroundColor: 'rgba(255,255,255,0)',
            borderColor: 'rgba(255,255,255,0)',
            color: 'rgba(255,255,255,0)'
        });
    }
});