Drag the hotpink squares
<div class="item-tl draggable-object"></div>
<div class="anchor"></div>
<div class="item-br draggable-object"></div>

.draggable-object {
  background: hotpink;
  width: 50px;
  aspect-ratio: 1;
  position: relative;
  cursor: grab;
}

.item-tl {
  anchor-name: --item-tl;
}

.item-br {
  anchor-name: --item-br;
  top: 500px;
  left: 200px;
}

.anchor {
  position: fixed;
  background: green;
  top: anchor(--item-tl bottom);
  bottom: anchor(--item-br top);
  left: anchor(--item-tl right);
  right: anchor(--item-br left);
}

body {
  font-family: sans-serif;
  font-size: 1.3rem;
}

document.addEventListener("DOMContentLoaded", (event) => {
  const draggableObjects = document.querySelectorAll(".draggable-object");

  draggableObjects.forEach((draggable) => {
    draggable.addEventListener("mousedown", onMouseDown);

    function onMouseDown(event) {
      event.preventDefault();

      const rect = draggable.getBoundingClientRect();
      const offsetX = event.clientX - rect.left;
      const offsetY = event.clientY - rect.top;

      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", onMouseUp);

      function onMouseMove(event) {
        draggable.style.left = `${event.clientX - offsetX}px`;
        draggable.style.top = `${event.clientY - offsetY}px`;
      }

      function onMouseUp() {
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("mouseup", onMouseUp);
      }
    }
  });
});