JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<p>
<button id="offset">offset()</button>
<button id="position">position()</button>
</p>

<div id="wrapper">
    <div id="test"></div>
</div>

<p id="output"></p>

CSS

#wrapper {
    padding: 1em;
    background: gray;
    position: relative;
    overflow: hidden;
}

#test {
    width: 5em;
    height: 5em;
    background: silver;
}

JavaScript

$('#offset').click(function() {
    var test = $('#test');
    var top = test.offset().top;
    var left = test.offset().left;
    $('#output').text('top: ' + top + ', left: ' + left);
});

$('#position').click(function() {
    var test = $('#test');
    var top = test.position().top;
    var left = test.position().left;
    $('#output').text('top: ' + top + ', left: ' + left);
});

function drag (e) {
    var el      = $(this),
        dragged = el.addClass('draggable'),
        d_h   = dragged.outerHeight(),
        d_w   = dragged.outerWidth(),
        pos_y = dragged.offset().top + d_h - e.pageY,
        pos_x = dragged.offset().left + d_w - e.pageX;

    dragged.parents().unbind("mousemove");
    dragged.parents().bind("mousemove", function drag(e) {
        $('.draggable').offset({
            top: e.pageY + pos_y - d_h,
            left: e.pageX + pos_x - d_w
        });
     });
            
     e.preventDefault();
}

function drop() {
    $('#test').removeClass('draggable');
}

$('#test').bind('mousedown', drag);
$('#test').bind('mouseup', drop);