Javascript防止可拖动div位于父div之外

// HTML结构
<div id="parentDiv" style="position: relative; width: 500px; height: 300px; border: 1px solid black;">
  <div id="draggableDiv" style="position: absolute; width: 100px; height: 100px; background-color: red;"></div>
</div>

// JavaScript代码
var draggableDiv = document.getElementById('draggableDiv');
var parentDiv = document.getElementById('parentDiv');
var initialX, initialY;

draggableDiv.addEventListener('mousedown', function(event) {
  initialX = event.clientX - draggableDiv.offsetLeft;
  initialY = event.clientY - draggableDiv.offsetTop;
  document.addEventListener('mousemove', dragDiv);
  document.addEventListener('mouseup', stopDragDiv);
});

function dragDiv(event) {
  var newX = event.clientX - initialX;
  var newY = event.clientY - initialY;
  
  // 检查是否超出父div的边界
  if (newX < 0) {
    newX = 0;
  }
  if (newX > parentDiv.offsetWidth - draggableDiv.offsetWidth) {
    newX = parentDiv.offsetWidth - draggableDiv.offsetWidth;
  }
  if (newY < 0) {
    newY = 0;
  }
  if (newY > parentDiv.offsetHeight - draggableDiv.offsetHeight) {
    newY = parentDiv.offsetHeight - draggableDiv.offsetHeight;
  }
  
  draggableDiv.style.left = newX + 'px';
  draggableDiv.style.top = newY + 'px';
}

function stopDragDiv() {
  document.removeEventListener('mousemove', dragDiv);
  document.removeEventListener('mouseup', stopDragDiv);
}