当图片的绝对位置为css，而父div的位置为相对位置时，如何使图片可拖动？

<div id="parentDiv" style="position: relative; width: 400px; height: 400px; border: 1px solid black;">
  <img id="dragImg" src="your_image_url" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;">
</div>

var dragImg = document.getElementById("dragImg");
var parentDiv = document.getElementById("parentDiv");
var isDragging = false;
var initialX, initialY;

dragImg.addEventListener("mousedown", function(event) {
  isDragging = true;
  initialX = event.clientX - dragImg.offsetLeft;
  initialY = event.clientY - dragImg.offsetTop;
});

document.addEventListener("mousemove", function(event) {
  if (isDragging) {
    var newX = event.clientX - initialX;
    var newY = event.clientY - initialY;
    dragImg.style.left = newX + "px";
    dragImg.style.top = newY + "px";
  }
});

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