javascript - 将绝对定位的 div 彼此移开

Question

我正在尝试使用绝对定位的 div 在页面上输出图像上的多个“标签”。每个 div 都有一个唯一的编号，并根据 map 上的 x 和 y 位置放置(这些是基于百分比的，因此图像可能会缩放)。

由于其中一些标签可能会重叠，我需要一种方法来阻止它们重叠，或者基本上将它们相互“碰撞”，以便它们不再重叠。 (此时，只要它们足够近，即使它们不在正确的位置也没关系，因为有一个单独的“固定” View )。

它们需要留在容器的范围内，并且不能相互重叠。

HTML:

<div id="labelzone">
    <div class="label" style="left:0%;top:8%">001</div>
    <div class="label" style="left:0%;top:11%">002</div>
    <div class="label" style="left:1%;top:10%">003</div>
</div>

CSS:

#labelzone{
    float:left;
    width:500px;
    height:500px;
    border: 1px solid black;
    position: relative;
}

.label{
    position:absolute;
    border:1px solid black;
    background-color:white;
}

Jsfiddle:https://jsfiddle.net/79cco1oy/

这是我作为输出的一个简单示例，这些引脚可以放置在任何地方，并且页面上的数量没有限制，但是不应该有太多的情况。区域。

我正在尝试进行某种形式的碰撞检测，目前正在尝试找出某种算法来使它们不再重叠，并确保它们也不会与另一个项目重叠。

Answer 1

我的解决方案更加面向对象。

一个对象(LabelPool)将包含标签，并负责存储和容纳它们，以便它们不会发生冲突。您可以自定义要添加/减去标签位置的 x/y 值，以避免它们发生冲突。另一个对象(Label)定义了一个Label并具有一些方便的方法。我在LabelPool中使用的碰撞算法取自此post

var Label = function ($el) {
    var position = $el.position(),
            width = $el.outerWidth(true),
            height = $el.outerHeight(true);

    this.getRect = function () {
        return {
            x: position.left,
            y: position.top,
            width: width,
            height: height
        };
    };

    this.modifyPos = function (modX, modY) {
        position.top += modY;
        position.left += modX;
        updatePos();
    };

    function updatePos() {
        $el.css({
            top: position.top,
            left: position.left
        });
    }
};

var LabelPool = function () {
    var labelPool = [];

    function collides(a, b) {
        return !(((a.y + a.height) < (b.y)) || (a.y > (b.y + b.height)) || ((a.x + a.width) < b.x) || (a.x > (b.x + b.width)));
    }

    function overlaps(label) {
        var a = label.getRect();
        return labelPool.some(function (other) {
            return collides(a, other.getRect());
        });
    }

    this.accomodate = function (label) {
        while (labelPool.length && overlaps(label)) {
            label.modifyPos(0, 1);// You can modify these values as you please.
        }
        labelPool.push(label);
    };
};

var labelPool = new LabelPool;
$(".label").each(function (_, el) {
    labelPool.accomodate(new Label($(el)));
});

这是fiddle .

希望有帮助。