多个div盒子可任意位置拖拽，并获取他们最终的位置

好的，以下是一个实现多个div盒子任意位置拖拽，并获取它们最终位置的示例代码：

HTML部分：

<div id="container">
  <div class="draggable" id="myDiv1">可拖动的div1</div>
  <div class="draggable" id="myDiv2">可拖动的div2</div>
  <div class="draggable" id="myDiv3">可拖动的div3</div>
</div>

CSS部分：

#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.draggable {
  position: absolute;
  cursor: move;
}

JavaScript部分：

var container = document.getElementById("container");
var draggables = document.querySelectorAll(".draggable");
var activeDraggable = null;
var initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0;

draggables.forEach(function(draggable) {
  draggable.addEventListener("mousedown", dragStart);
  draggable.addEventListener("mouseup", dragEnd);
  draggable.addEventListener("mousemove", drag);
});

function dragStart(event) {
  activeDraggable = this;
  initialX = event.clientX - xOffset;
  initialY = event.clientY - yOffset;
}

function dragEnd(event) {
  initialX = currentX;
  initialY = currentY;
  activeDraggable = null;
  console.log("最终位置：(" + currentX + ", " + currentY + ")");
}

function drag(event) {
  if (activeDraggable) {
    event.preventDefault();
    currentX = event.clientX - initialX;
    currentY = event.clientY - initialY;
    xOffset = currentX;
    yOffset = currentY;
    setTranslate(currentX, currentY, activeDraggable);
  }
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

这个代码会使得拥有class为draggable的所有div元素可以被拖动，并且当拖动结束时会打印出它们最终的位置。可以通过修改CSS样式来控制盒子容器的样式和位置。在这个示例代码中，容器的宽度和高度都是500px，边框为1px的黑色实线。