如何在代码中自由地移动div元素？

<div id="myDiv"></div>

#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

var myDiv = document.getElementById("myDiv");
var initialX, initialY;

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

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

document.addEventListener("mouseup", function() {
  initialX = null;
  initialY = null;
});