如何用原生JavaScript实现元素间的碰撞反弹效果

问题概述 #

尝试在元素靠近彼此的时候修改元素的top、left属性以及margin（搭配不同定位设置），但只有margin的修改能生效一次，需要实现更稳定的交互效果。

原始代码问题分析 #

核心问题点

1. 重复绑定事件：move函数每次鼠标移动都会重新绑定mouseover/mouseleave事件，导致触发逻辑混乱，移除不彻底
2. 静态边界值：仅在页面加载时获取一次元素的getBoundingClientRect()值，元素移动后边界未更新，碰撞检测失效
3. ID重复：HTML中存在两个id="two"的元素，getElementById仅能获取第一个，后续元素操作无效
4. 定位冲突：默认static定位下top/left不生效，切换absolute后margin逻辑变化，混用导致布局混乱

修正方案与完整代码 #

1. 基础修复：统一元素ID与定位

确保每个元素ID唯一，为拖拽元素设置固定absolute定位，避免定位切换的布局问题：

<html>
<head>
<style type="text/css">
#two {
    border: 1px solid black;
    padding: 1%;
    margin: 1%;
    width: 10%;
    position: absolute;
    top: 10%;
}
#three {
    border: 1px solid black;
    padding: 1%;
    position: absolute;
    top: 20%;
}
#test {
    border: 1px solid black;
    padding: 1%;
    position: absolute;
    top: 30%;
    height: 30%;
}
</style>
</head>
<body>
<div id="two" onmousedown="testmovea(this)">stop movement</div>
<div id="three" onmousedown="testmovea(this)">Expand div</div>
<div id="test" contenteditable="true">some contenteditable</div>

<script>
var three = document.getElementById('three');
var test = document.getElementById('test');
var two = document.getElementById('two');
var obj = null;
let twoBound, threeBound, testBound;

2. 优化事件绑定逻辑

仅在拖拽开始时绑定事件，结束时统一移除，避免重复绑定：

function testmovea(object) {
    obj = object;
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", stopMove);
    two.addEventListener('mouseenter', bTwo);
    test.addEventListener('mouseenter', bTest);
    two.addEventListener('mouseleave', bTwoReset);
    test.addEventListener('mouseleave', bTestReset);
}

function stopMove() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener("mouseup", stopMove);
    two.removeEventListener('mouseenter', bTwo);
    test.removeEventListener('mouseenter', bTest);
    two.removeEventListener('mouseleave', bTwoReset);
    test.removeEventListener('mouseleave', bTestReset);
}

3. 实时更新边界与正确碰撞检测

拖拽时实时更新元素边界，使用标准矩形碰撞检测逻辑：

function move(event) {
    obj.innerText = event.clientX + ' ' + event.clientY;
    obj.style.left = event.clientX + "px";
    obj.style.top = event.clientY + "px";
    updateBounds();
    checkCollision();
}

function updateBounds() {
    twoBound = two.getBoundingClientRect();
    threeBound = three.getBoundingClientRect();
    testBound = test.getBoundingClientRect();
}

function checkCollision() {
    // 检测two与three是否碰撞
    const twoThreeCollide = twoBound.left < threeBound.right && 
                           twoBound.right > threeBound.left && 
                           twoBound.top < threeBound.bottom && 
                           twoBound.bottom > threeBound.top;
    
    two.style.margin = twoThreeCollide ? "10%" : "0%";
    if (twoThreeCollide) {
        three.style.left = (threeBound.x + 10) + "px";
        three.style.top = (threeBound.y + 10) + "px";
    }

    // 检测three与test是否碰撞
    const threeTestCollide = threeBound.left < testBound.right && 
                            threeBound.right > testBound.left && 
                            threeBound.top < testBound.bottom && 
                            threeBound.bottom > testBound.top;
    
    test.style.margin = threeTestCollide ? "10%" : "0%";
}

4. 边距控制函数

function bTwo() {
    two.style.margin = "10%";
}

function bTwoReset() {
    two.style.margin = "0%";
}

function bTest() {
    test.style.margin = "10%";
}

function bTestReset() {
    test.style.margin = "0%"
}
</script>
</body>
</html>

效果说明 #

• 拖拽元素时实时更新边界值，碰撞检测准确稳定
• 事件仅在拖拽周期内绑定/移除，避免逻辑混乱
• 统一使用absolute定位，top/left与margin的行为可预期
• 修复ID重复问题，所有元素均可正常交互

内容的提问来源于stack exchange，提问作者user784446