原生javascript实现DIV拖拽并计算重复面积

对于如何使用原生JavaScript实现DIV拖拽并计算重叠面积，我们可以采用以下步骤：

步骤一：HTML布局

首先，在HTML中需要定义两个DIV，分别代表我们要移动的两个矩形。

<div id="rect1" class="rectangle"></div>
<div id="rect2" class="rectangle"></div>

其中，我们为两个DIV都设置了class为rectangle，这是后续在CSS样式中设置样式的前提。

步骤二：CSS样式

在CSS中，我们需要为这两个DIV定义样式，并将其定位为可拖动的元素。

.rectangle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  cursor: move;
}

其中，我们设置了DIV的宽度、高度和背景颜色，将其定位为absolute，并设置了光标样式为move，以便用户可以拖拽矩形元素。

步骤三：JavaScript实现拖拽

接下来，在JavaScript中我们需要实现DIV的拖拽功能，在 mousemove 事件中，获取鼠标指针的当前位置，并计算出移动的距离，然后将这个距离累加到原始位置上。

var activeRect = null;
var initialMouseX, initialMouseY, initialRectX, initialRectY;

document.addEventListener("mousedown", function (e) {
  if (e.target.classList.contains("rectangle")) {
    activeRect = e.target;

    initialMouseX = e.clientX;
    initialMouseY = e.clientY;

    initialRectX = parseFloat(
      window.getComputedStyle(activeRect).left.replace("px", "")
    );
    initialRectY = parseFloat(
      window.getComputedStyle(activeRect).top.replace("px", "")
    );
  }
});

document.addEventListener("mouseup", function (e) {
  if (activeRect !== null) {
    activeRect = null;
  }
});

document.addEventListener("mousemove", function (e) {
  if (activeRect !== null) {
    var deltaX = e.clientX - initialMouseX;
    var deltaY = e.clientY - initialMouseY;

    activeRect.style.left = initialRectX + deltaX + "px";
    activeRect.style.top = initialRectY + deltaY + "px";
  }
});

这段代码实现了拖拽的过程。在mousedown事件中，我们记录下了鼠标的起始坐标和被拖拽的元素的起始坐标，用以计算拖拽开始后鼠标移动的距离。在mousemove事件中，我们计算出了该距离后，将被拖拽的元素的left和top属性值加上这个距离即可实现拖拽的效果。

步骤四：计算重合面积

最后一步，我们需要计算两个矩形的重合面积。假设矩形A和矩形B相交的区域为矩形C。可以将这个问题简化为计算两个矩形C1和C2的重合面积。C1和C2的坐标可以通过相对于文档的top、left值以及其高度和宽度来计算。

function getIntersection(rect1, rect2) {
  var leftX = Math.max(rect1.x, rect2.x);
  var rightX = Math.min(rect1.x + rect1.width, rect2.x + rect2.width);

  var topY = Math.max(rect1.y, rect2.y);
  var bottomY = Math.min(rect1.y + rect1.height, rect2.y + rect2.height);

  if (leftX >= rightX || topY >= bottomY) {
    return 0;
  }

  return (rightX - leftX) * (bottomY - topY);
}

function getRectangleCoordinates(element) {
  var rectangle = {};

  var rectangleOffset = element.getBoundingClientRect();

  rectangle.x = rectangleOffset.left + window.scrollX;
  rectangle.y = rectangleOffset.top + window.scrollY;
  rectangle.width = element.offsetWidth;
  rectangle.height = element.offsetHeight;

  return rectangle;
}

function getIntersectionArea() {
  var rect1 = getRectangleCoordinates(document.getElementById("rect1"));
  var rect2 = getRectangleCoordinates(document.getElementById("rect2"));

  var intersection = getIntersection(rect1, rect2);

  document.getElementById("results").innerHTML =
    "Intersection area: " + intersection;
}

这段代码实现了两个矩形的重合面积的计算。首先，我们通过调用getRectangleCoordinates函数来获取矩形元素的坐标和尺寸信息。然后，我们使用getIntersection函数计算矩形C1和C2的重叠面积。最后，我们更新页面上显示结果的元素（这里是一个p元素），并将结果写入其中。

示例

这里给出两个操作矩形的示例：

示例1：拖拽矩形

当你按住矩形，然后将其拖动时，页面上会显示出两个矩形的重合面积。

<div id="rect1" class="rectangle"></div>
<div id="rect2" class="rectangle"></div>

<p id="results"></p>

<script>
  /* 首先放入步骤三的JavaScript代码 */

  document.getElementById("rect1").addEventListener("mouseup", function () {
    getIntersectionArea();
  });

  document.getElementById("rect2").addEventListener("mouseup", function () {
    getIntersectionArea();
  });
</script>

示例2：自动计算重叠面积

页面加载完毕时，自动计算两个矩形的重合面积。

<div id="rect1" class="rectangle"></div>
<div id="rect2" class="rectangle"></div>

<p id="results"></p>

<script>
  /* 首先放入步骤三的JavaScript代码 */

  window.addEventListener("load", function () {
    getIntersectionArea();
  });
</script>

以上就是原生JavaScript实现DIV拖拽并计算重叠面积的完整攻略。