JSFiddle - React, Tailwind, and code Playground

by Thanos Saringelos

HTML

<div style='padding:20px 20px 20px 20px'>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

</div>

CSS

body {padding:50px;}

div {
  cursor:move;
  width:70px;
  height:70px;
  background-color:black;
  border:1px solid black;
  margin:2px;
  float:left;
}

.draggable {
  background-color:yellow;
}

JavaScript

$(document).ready(function() {
    var $dragging = null;
    $('body').on("mousedown", "div", function(e) {
        $(this).attr('unselectable', 'on').addClass('draggable');
        var el_w = $('.draggable').outerWidth(),
            el_h = $('.draggable').outerHeight();
        $('body').on("mousemove", function(e) {
            if ($dragging) {
                $dragging.offset({
                    top: e.pageY - el_h / 2,
                    left: e.pageX - el_w / 2
                });
            }
        });
        $dragging = $(e.target);
    }).on("mouseup", ".draggable", function(e) {
        $dragging = null;
        $(this).removeAttr('unselectable').removeClass('draggable');
    });
});