Moveable window

<html>
  <body style="margin: 0">
    <style>
      .window {
        display: block;
        position: absolute;
        background: lightcoral;
        width: 500px;
        height: 300px;
        top: 100px;
        left: 100px;
      }
      .window-head {
        background: lightseagreen;
        height: 20px;
      }
      .window-content {
        background: lightgreen;
        overflow: scroll;
        width: 100%;
        height: 100%;
      }
      .window-head-title {
        float: left;
        background-color: aqua;
        width: calc(100% - 20px);
        height: 20px;
        cursor: grab;
        user-select: none;
      }
      .window-head-actions {
        float: right;
        background-color: lightsteelblue;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    </style>
    <div class="window" id="bind-0">
      <div class="window-head">
        <div class="window-head-title" id="bind-1">Title</div>
        <div class="window-head-actions" id="bind-2">
          <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
            <line x1="1" y1="1" x2="9" y2="9" stroke="black" />
            <line x1="1" y1="9" x2="9" y2="1" stroke="black" />
          </svg>
        </div>
      </div>
      <div class="window-content" id="bind-3"></div>
    </div>
    <script>
      let moveOn = false;
      let bind0 = document.getElementById("bind-0");
      let bind1 = document.getElementById("bind-1");
      let bind2 = document.getElementById("bind-2");
      let bind3 = document.getElementById("bind-3");
      function addText(text) {
        bind3.innerText = bind3.innerText + "\n" + text;
      }
      bind2.onclick = () => {
        addText("close " + new Date().toLocaleString());
      };

      bind1.onmouseup = (event) => {
        moveOn = false;
      };
      bind1.onmouseleave = (event) => {
        moveOn = false;
      };
      bind1.onmousedown = (event) => {
        moveOn = true;
      };
      bind1.onmousemove = (event) => {
        if (!moveOn) {
          return;
        }
        console.log(moveOn);
        let pos = bind1.getBoundingClientRect();
        bind0.style.top = event.clientY - (pos.bottom - pos.top) / 2 + "px";
        bind0.style.left = event.clientX - (pos.right - pos.left) / 2 + "px";
        console.log(event);
      };
    </script>
  </body>
</html>