JSFiddle - React, Tailwind, and code Playground

HTML

<div data-draggable="true" >Draggable</div>
		<div>not</div>
		<div>not</div>
		<div>not</div>
		<div>not</div>
		<div data-draggable="true" >Draggable</div>

CSS

body {
				background:#eee;
			    height:800px;
			}

			.noselect{
			    -webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			div {
			  cursor:move;
			  width:80px;
			  height:50px;
			  background-color:#ddd;
			  margin:2px;
			  float:left;
			}

			.draggable {
			  background-color:red;
			}

JavaScript

$(document).ready(function() {
		    
		    var $body = $('body');
		    var $target = null;
		    var isDraggEnabled = false;

		    $body.on("mousedown", "div", function(e) {
		       
		    	$this = $(this);
		       	isDraggEnabled = $this.data("draggable");

		       	if (isDraggEnabled) {
		       		if(e.offsetX==undefined){
						x = e.pageX-$(this).offset().left;
						y = e.pageY-$(this).offset().top;
					}else{
						x = e.offsetX;
						y = e.offsetY;
					};

					$this.addClass('draggable');
		        	$body.addClass('noselect');
		        	$target = $(e.target);
		       	};
   
		    });
		    
		     $body.on("mouseup", function(e) {
		        $target = null;
		        $body.find(".draggable").removeClass('draggable');
		        $body.removeClass('noselect');
		    });
		    
		     $body.on("mousemove", function(e) {
	            if ($target) {
	                $target.offset({
	                    top: e.pageY  - y,
	                    left: e.pageX - x
	                });
	            };     
		     });

		});