在容器div的整个空间中拖动2个div

<div id="container">
  <div id="div1" draggable="true">Div 1</div>
  <div id="div2" draggable="true">Div 2</div>
</div>

// 获取容器和待拖动的div元素
var container = document.getElementById("container");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

// 定义拖动开始时的处理函数
function dragStart(event) {
  // 设置被拖动元素的数据
  event.dataTransfer.setData("text/plain", event.target.id);
}

// 定义拖动进入容器时的处理函数
function dragEnter(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
  // 添加一个类名来显示拖放目标区域
  container.classList.add("drag-over");
}

// 定义拖动离开容器时的处理函数
function dragLeave(event) {
  // 移除拖放目标区域的类名
  container.classList.remove("drag-over");
}

// 定义拖动在容器中移动时的处理函数
function dragOver(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
}

// 定义拖动放下时的处理函数
function drop(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
  // 获取被拖动元素的数据
  var id = event.dataTransfer.getData("text/plain");
  // 将被拖动的元素添加到容器中
  container.appendChild(document.getElementById(id));
  // 移除拖放目标区域的类名
  container.classList.remove("drag-over");
}

// 添加拖放事件监听器
div1.addEventListener("dragstart", dragStart);
div2.addEventListener("dragstart", dragStart);
container.addEventListener("dragenter", dragEnter);
container.addEventListener("dragleave", dragLeave);
container.addEventListener("dragover", dragOver);
container.addEventListener("drop", drop);

#container {
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

#div1, #div2 {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #999;
  margin-bottom: 10px;
}

#container.drag-over {
  border-color: #ff0000;
}