在另一个div中创建可拖动的div

<div id="container">
  <div id="draggable">可拖动的div</div>
</div>

#container {
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
}

#draggable {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #f1f1f1;
  border: 1px solid #999;
}

var draggable = document.getElementById('draggable');
var container = document.getElementById('container');

draggable.addEventListener('mousedown', function(event) {
  // 记录鼠标按下时的初始位置
  var startX = event.clientX;
  var startY = event.clientY;

  // 记录可拖动的div元素的初始位置
  var draggableX = draggable.offsetLeft;
  var draggableY = draggable.offsetTop;

  // 添加mousemove事件监听器，实现拖动效果
  container.addEventListener('mousemove', move);

  // 添加mouseup事件监听器，停止拖动
  container.addEventListener('mouseup', stop);

  // 阻止事件冒泡和默认行为
  event.stopPropagation();
  event.preventDefault();

  // 移动函数
  function move(event) {
    // 计算鼠标移动的距离
    var moveX = event.clientX - startX;
    var moveY = event.clientY - startY;

    // 计算可拖动的div元素的新位置
    var newDraggableX = draggableX + moveX;
    var newDraggableY = draggableY + moveY;

    // 更新可拖动的div元素的位置
    draggable.style.left = newDraggableX + 'px';
    draggable.style.top = newDraggableY + 'px';
  }

  // 停止函数
  function stop() {
    // 移除mousemove和mouseup事件监听器
    container.removeEventListener('mousemove', move);
    container.removeEventListener('mouseup', stop);
  }
});