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

，可以通过以下步骤实现：

首先，在HTML中创建两个div元素，一个作为容器div，另一个作为可拖动的div。给它们分别设置id属性，方便后续操作。

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

在CSS中设置容器div的样式，使其具有一定的宽度和高度，并设置position属性为relative，以便后续拖动操作。

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

继续在CSS中设置可拖动的div的样式，使其具有一定的宽度和高度，并设置position属性为absolute，以便后续拖动操作。同时，设置背景颜色和边框样式，以便区分可拖动的div。

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

使用JavaScript实现拖动功能。首先，获取可拖动的div元素和容器div元素，并为可拖动的div元素添加mousedown事件监听器。

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);
  }
});

通过以上步骤，就可以在另一个div中创建一个可拖动的div了。当鼠标按下可拖动的div并移动时，可拖动的div会跟随鼠标移动。释放鼠标时，停止拖动。