如何在div中拖动可拖动元素

<div id="drag-container" style="width: 500px; height: 300px; border: 1px solid #ccc;">
  <div id="draggable-element" style="width: 100px; height: 100px; background-color: #f00;"></div>
</div>

// 获取拖动元素和拖放区域
var draggableElement = document.getElementById("draggable-element");
var dragContainer = document.getElementById("drag-container");

// 定义变量记录鼠标按下时的初始位置
var initialX, initialY;

// 监听鼠标按下事件
draggableElement.addEventListener("mousedown", function(event) {
  // 记录鼠标按下时的初始位置
  initialX = event.clientX - draggableElement.offsetLeft;
  initialY = event.clientY - draggableElement.offsetTop;

  // 监听鼠标移动事件
  document.addEventListener("mousemove", dragElement);
  
  // 监听鼠标松开事件
  document.addEventListener("mouseup", stopDragElement);
});

// 定义拖动函数
function dragElement(event) {
  // 计算鼠标当前位置相对于拖放区域的偏移量
  var offsetX = event.clientX - initialX;
  var offsetY = event.clientY - initialY;

  // 设置拖动元素的新位置
  draggableElement.style.left = offsetX + "px";
  draggableElement.style.top = offsetY + "px";
}

// 定义停止拖动函数
function stopDragElement() {
  // 移除鼠标移动事件和鼠标松开事件的监听
  document.removeEventListener("mousemove", dragElement);
  document.removeEventListener("mouseup", stopDragElement);
}