JSFiddle - React, Tailwind, and code Playground

by hoangtua

HTML

<div class="unselectable">Drag me!</div>

CSS

body {background: #3c3c3c;}
div { 
    background: #FFF; 
    width: 100px; 
    height: 100px; 
    text-align: center;
    line-height: 100px;
    vertical-algin: middle;
    border: 1px solid black; 
    cursor: pointer;
}
*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

JavaScript

$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY-50,
                left: e.pageX-50
            });
        }
    });
    
    $(document.body).on("mousedown", "div", function (e) {
        $dragging = $(e.target);
    });
    
    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});