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

，可以通过使用HTML5的拖放API来实现。以下是一个完善且全面的答案：

拖放是指在网页中将一个元素从一个位置拖动到另一个位置的操作。在这个场景中，我们需要在一个容器div中拖动两个div元素。

首先，我们需要在HTML中创建一个容器div和两个待拖动的div元素。可以使用以下代码：

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

在上面的代码中，我们给两个div元素添加了draggable="true"属性，表示它们可以被拖动。

接下来，我们需要使用JavaScript来实现拖放的逻辑。可以使用以下代码：

// 获取容器和待拖动的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);

在上面的代码中，我们定义了几个处理函数来处理拖放的不同阶段。dragStart函数在拖动开始时设置被拖动元素的数据。dragEnter函数在拖动进入容器时添加一个类名来显示拖放目标区域。dragLeave函数在拖动离开容器时移除该类名。dragOver函数在拖动在容器中移动时阻止默认的拖放行为。drop函数在拖动放下时获取被拖动元素的数据，并将其添加到容器中。

最后，我们可以通过CSS来美化容器和待拖动的div元素的样式。可以使用以下代码：

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

在上面的代码中，我们设置了容器的宽度、高度、边框和内边距。待拖动的div元素的样式包括宽度、高度、背景颜色和边框。当拖动进入容器时，容器的边框颜色会变为红色。

这样，当你在浏览器中打开这个页面时，你就可以在容器div的整个空间中拖动两个div元素了。

腾讯云相关产品和产品介绍链接地址：