单击并拖动时更改背景颜色

<div id="drag-element"></div>

#drag-element {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

var dragElement = document.getElementById("drag-element");

dragElement.addEventListener("mousedown", function(event) {
  var startX = event.clientX;
  var startY = event.clientY;

  function handleMove(event) {
    var deltaX = event.clientX - startX;
    var deltaY = event.clientY - startY;

    // 根据移动距离修改背景颜色
    var red = Math.abs(deltaX) % 256;
    var green = Math.abs(deltaY) % 256;
    var blue = Math.abs(deltaX - deltaY) % 256;

    dragElement.style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")";
  }

  function handleUp() {
    document.removeEventListener("mousemove", handleMove);
    document.removeEventListener("mouseup", handleUp);
  }

  document.addEventListener("mousemove", handleMove);
  document.addEventListener("mouseup", handleUp);
});