JSFiddle - React, Tailwind, and code Playground

by ExplosionPIlls

HTML

<div id="draggable"></div>

<div id="droppable"></div>
<input class="reset" type="submit">

CSS

#draggable {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: blue;
    z-index: 1;
}
#droppable {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 50%;
    left: 50%;
}

JavaScript

$("#draggable").draggable
    ({  
        revert: 'invalid',
        snap: '#droppable',
        snapMode: 'corner',
        snapTolerance: '22'
    });

$("#draggable").data({'originalLeft': $("#draggable").css('left'),
                      'origionalTop': $("#draggable").css('top')
                     });


    $("#droppable").droppable
    ({
        accept: '#draggable', 
        drop: function(event, ui) 
        {
            $(this).find("#draggable").html();
        }
});

    $(".reset").click(function() {
        $("#draggable").css({'left': $("#draggable").data('originalLeft'),
                             'top': $("#draggable").data('origionalTop')}
                             );
});