Table
body{margin:0px; padding:0px; font-size:12px}
.div{height:160px;width:160px;position:absolute; text-align:center; }
.demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px}
.demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top:20px}
.demo3{ border:1px
在网页设计中，有时我们需要实现可拖动的div元素，并且需要判断这些div是否发生重叠以及重合的具体程度。这个需求通常出现在交互式界面或者拖放操作的应用中，例如在线布局工具、游戏界面或者自定义组件配置。下面将详细讨论如何实现这个功能。
我们看到CSS样式定义了多个具有不同背景色和边框的div，如`.demo1`到`.demo9`。这些div被设置为绝对定位，以便可以自由移动。例如，`.demo1`的初始位置是`left:150px`和`top:20px`，其他div也有各自的初始位置。每个div的大小都是`height:160px`和`width:160px`，这使得它们有可能相互重叠。
要判断这些div是否重合，我们需要利用JavaScript或jQuery来检测它们的位置。以下是一种可能的实现方式：
1. **获取元素位置**：我们需要获取每个div的实时位置，这可以通过JavaScript的`getBoundingClientRect()`方法来实现。该方法返回一个对象，其中包含了元素的`top`、`right`、`bottom`和`left`等属性，表示元素相对于视口的位置。
2. **设定重叠条件**：两个div重合的条件是它们的边界有交集。具体来说，如果div1的`left`小于div2的`right`，并且div1的`right`大于div2的`left`，同时div1的`top`小于div2的`bottom`，并且div1的`bottom`大于div2的`top`，那么这两个div就重合了。
3. **计算重合面积**：一旦确定了重合，我们可以进一步计算重合的像素面积。这需要计算两个div重叠部分的宽度和高度，然后相乘得到面积。
4. **事件监听**：为了在div移动时实时更新重合状态，我们需要监听div的`mousedown`、`mousemove`和`mouseup`事件。在`mousedown`时开始记录div的新位置，在`mousemove`时检查是否与其他div重合，`mouseup`时结束检查。
5. **视觉反馈**：当检测到div重合时，可以改变重合div的背景色，如设置为`.focus`类所示的红色，以提供用户反馈。
在实际应用中，我们可能还需要考虑多个div同时重合的情况，以及如何优化性能以避免频繁的计算。对于多元素重合，可以先比较相邻的元素，然后再扩展到其他元素。对于性能优化，可以使用节流函数（throttle）或防抖函数（debounce）来减少计算频率。
判断可拖动div是否重合以及重合多少，需要结合CSS定位和JavaScript动态检测。通过获取元素位置，设定重合条件，计算重合面积，监听拖动事件并提供视觉反馈，我们可以创建出一个交互式的、能准确反映div重合情况的页面。在实际开发中，还可以根据项目需求进行调整和扩展，比如增加对触摸设备的支持，或者添加更复杂的碰撞检测算法。
