JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">Drag me</div>
<div class="droppable">Onto me</div>

CSS

.droppable {
    background-color: #f00;
    height: 200px;
    line-height: 200px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 200px;
}

.droppable.draggedOver {
    background-color: #00f;
}

.draggable {
    background-color: #0f0;
    height: 200px;
    line-height: 200px;
    text-align: center;
    width: 200px;
}

JavaScript

$('.droppable').droppable({
    tolerance: 'pointer',
    over: function(event, ui) {
        $(this).addClass('draggedOver');
    },
    out: function(event, ui) {
        $(this).removeClass('draggedOver');
    }
});

$('.draggable')
    .draggable({
        helper: 'clone',
        opacity: 0.25,
        cursor: 'move',
        refreshPositions: true 
    })
    .on('dragstart', function() {
        $('.droppable').animate({
            right: '100px',
            top: '100px'
        }, 500);
    })
    .on('dragstop', function() {
        $('.droppable').animate({
            right: 0,
            top: 0
        }, 500);
    })
;