JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divStyle">
      <div id="move"></div>
</div>

CSS

#divStyle {
            display: flex;
            align-items:center;
            width: 1000px;
            height: 500px;
            outline: 1px solid red;
            position: relative;
        }
    #move {
            width: 200px;
            height: 100px;
            outline: 1px solid green;
            position: absolute;
        }

JavaScript

var deltaX;
      var deltaY;
      var move = document.getElementById("move");

      function getMouse(e){
        move.style.left = (e.pageX - deltaX) + "px";
        move.style.top = (e.pageY - deltaY) + "px";
        console.log()
        if(move.offsetLeft >= 700){
              move.style.left = 699 + "px";
        }
        if(move.offsetTop <= 200 || move.offsetTop >= 202){
          move.style.top = 201 + "px";
        }

      }

      move.onmousedown = function(e){
            deltaX = e.pageX - move.offsetLeft;
            deltaY = e.pageY - move.offsetTop;
            window.addEventListener('mousemove', getMouse);
      }

      move.onmouseup = function(e){
        window.removeEventListener('mousemove', getMouse);
      }
      
      document.onmouseup = function(e){
        window.removeEventListener('mousemove', getMouse);
      }