JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="dragit-wrapper">
  <div id="dragit">Drag me</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.dragit-wrapper {
  border: 2px solid #000;
}
#dragit {
  background: yellow;
  width: 200px;
  height: 200px;
}

JavaScript

var draggable = $('#dragit'); //element 

draggable.on('mousedown', function(e){
    var dr = $(this).addClass("drag").css("cursor","move");
    // height = dr.outerHeight();
    width = dr.outerWidth();
    // ypos = dr.offset().top + height - e.pageY,
    xpos = dr.offset().left + width - e.pageX;
    $(document.body).on('mousemove', function(e){
        // var itop = e.pageY + ypos - height;
        var ileft = e.pageX + xpos - width;
        if(dr.hasClass("drag")){
            dr.offset({top: 0,left: ileft});
        }
    }).on('mouseup', function(e){
            dr.removeClass("drag");
    });
});