JavaScript는 팝업 상자 드래그를 페이지의 보이는 영역으로 제한하면서 어떻게 구현할 수 있습니까?

var dialog = document.getElementById("dialog");
var title = dialog.querySelector(".title");

var initialMouseX = 0;
var initialMouseY = 0;
var initialDialogX = 0;
var initialDialogY = 0;
var isDragging = false;

title.addEventListener("mousedown", function(e) {
  isDragging = true;
  initialMouseX = e.clientX;
  initialMouseY = e.clientY;
  initialDialogX = dialog.offsetLeft;
  initialDialogY = dialog.offsetTop;
});

document.addEventListener("mouseup", function() {
  isDragging = false;
});

document.addEventListener("mousemove", function(e) {
  if (isDragging) {
    var deltaX = e.clientX - initialMouseX;
    var deltaY = e.clientY - initialMouseY;
    var newDialogX = initialDialogX + deltaX;
    var newDialogY = initialDialogY + deltaY;

    // 限制在页面可见区域内
    var maxDialogX = window.innerWidth - dialog.offsetWidth;
    var maxDialogY = window.innerHeight - dialog.offsetHeight;
    newDialogX = Math.max(0, Math.min(newDialogX, maxDialogX));
    newDialogY = Math.max(0, Math.min(newDialogY, maxDialogY));

    dialog.style.left = newDialogX + "px";
    dialog.style.top = newDialogY + "px";
  }
});