JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="dragThis">
    <ul>
        <li id="posX"></li>
        <li id="posY"></li>
        <li id="finalX"></li>
        <li id="finalY"></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS

#dragThis {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

JavaScript

$('#dragThis').draggable(
    {
        containment: $('body'),
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        },
        stop: function(){
            var finalOffset = $(this).offset();
            var finalxPos = finalOffset.left;
            var finalyPos = finalOffset.top;

    $('#finalX').text('Final X: ' + finalxPos);
    $('#finalY').text('Final X: ' + finalyPos);
        },
        revert: 'invalid'
    });

$('#dropHere').droppable(
    {
        accept: '#dragThis',
        over : function(){
            $(this).animate({'border-width' : '5px',
                             'border-color' : '#0f0'
                            }, 500);
            $('#dragThis').draggable('option','containment',$(this));
        }
    });