JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <div>

    <div id="card">
    </div>
    <div id="card">
    </div>
  </div>

CSS

#card {
  position: fixed;
  width: 100px;
  height: 150px;
  top: 10x;
  left: 10px;
  border: 1px solid #D3D3D3;
}

JavaScript

var selected = 0,
   x = 0,
   y = 0,
   boxX = 0,
   boxY = 0;
  
$.fn.isDraggable = function() {

  $(this).on('mousedown', function(e) {
    selected = $(this);
    //get initial positions
    x = e.pageX;
    y = e.pageY;
    BoxX = $(selected).offset().left;
    BoxY = $(selected).offset().top;
    //bind mousemove
    $(document).bind('mousemove', function(e) {
    	//compute new coordinate
    	deltaX = e.pageX - x;
      deltaY = e.pageY - y;
      $(selected).css({
        position: 'absolute',
        left: (BoxX + deltaX),
        top: (BoxY + deltaY)
      });
    });
  });
  //unbind when finished
  $(document).on('mouseup', function() {
    if (selected !== 0) {
    	$(document).unbind("mousemove");
      selected = 0;
    }
  });
  
  return true;
};


$('#card').isDraggable();