JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dxy">
  <div id="draggable_handle">
    <p>
    Draggable part
    </p>
  </div>
</div>

CSS

#dxy {
  width: 200px;
  height: 150px;
  background-color: lightblue;
}

#draggable_handle {
  height: 30px;
  width: 100%;
  text-align: center;
  background-color: pink;
}

JavaScript

window.onload = addListeners();
var x_pos = 0,
  y_pos = 0;

function addListeners() {
  document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
}

function mouseUp() {
  window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e) {
  var div = document.getElementById('dxy');
  x_pos = e.clientX - div.offsetLeft;
  y_pos = e.clientY - div.offsetTop;
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {
  var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = (e.clientY - y_pos) + 'px';
  div.style.left = (e.clientX - x_pos) + 'px';
}