JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div id="tvsel">hi</div>

CSS

#tvsel {position:absolute; top:0px; left:0px; width:50px; height:50px; background:#F00;}

JavaScript

$('#tvsel').on('mousedown', function(e) {
        var start = {
            top:parseInt($(this).css('top').replace(/px/,'')),
            left: parseInt($(this).css('left').replace(/px/,''))
        };
        var mouse = {top:e.clientY, left:e.clientX};
        var el = $(this);
        el.addClass('dragged');
        $(window).on('mousemove',function(mme) {
            var end = {
                Y:start.top + mme.clientY - mouse.top,
                X:start.left + mme.clientX - mouse.left
            }
            el.css({top:end.Y+'px', left:end.X+'px'});
        }).on('mouseup, mouseout, click',function() {
            el.removeClass('dragged');
            $(window).off('mousemove');
        });
        return false;
    });