Move absolute positioned divs off eachoter

Question

I'm attempting to output on a page multiple 'labels' over an image using absolute positioned divs. Each of these divs has a unique number and are placed according to an x and y position on the map (these are percentage based so the image may be scaled).

As some of these labels may overlap, I need a way to either stop them from overlapping, or to essentially 'bump' them off eachother so they no longer overlap. (At this point, it doesn't matter if they are not in their correct position as long as they are near enough as there is a separate 'Pin' view).

They need to stay within the confines of their container and not overlap with eachother.

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/

There's a simple example of what I have as an output, these pins could be placed anywhere and there is no limit to how many is on the page, however there shouldn't be any occasion where there are too many to fit in the area.

I'm toying around with doing some form of collision detection and currently attempting to figure out an algorithm of some sort to get them to no longer overlap, and ensure they also don't overlap another item.

@VikrantMore As long as they don't overlap and are near their original positions, then it'll be a success! — JakeJ, May 01 '15 at 11:14

score 1 · Answer 1 · edited May 23 '17 at 12:06

My solution is a bit more object oriented.

One object (LabelPool) will contain labels and will be in charge of storing and accomodating them so that they don't collide. You can customize the x/y values that you want to add/substract of the Label's positions in order to avoid their collision. The other object (Label) defines a Label and has some convenient methods. The collision algorithm that I used in LabelPool was taken from this 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)));
});

Here's the fiddle.

Hope it helps.

Marcassin · Answer 2 · 2015-05-01T13:41:29.267

Using js and jquery, you can find a basic collision engine based on left/top abs position and size of the label.

https://jsfiddle.net/Marcassin/79cco1oy/6/

Every time you want to add a Label, you check if the positionning is overlaping any existing div, in this case, you translate the new Label to position. This operation may not be the most beautiful you can find, there can be a long process time in case of lots of labels.

$(document).ready (function () {
    addLabel (0, 8);
    addLabel (0, 11);
    addLabel (1, 10);
    addLabel (2, 7);

    });

function addLabel (newLeft, newTop)
{

  var newLab = document.createElement ("div");
  newLab.className = "label";
  $(newLab).css({"left": newLeft+"%", "top": newTop + "%"});
  var labels = $("#labelzone > div");
  newLab.innerHTML =  "00" + (labels.length + 1); // manage 0s
  $("#labelzone").append (newLab);

  var isCollision = false;
  var cpt = 1;
  do
  {
     isCollision = false;
     $(labels).each (function () {
        if (! isCollision && collision (this, newLab))
           isCollision = true;
     });

    if (isCollision)
         $(newLab).css({"left": (newLeft + cpt++) + "%",
                        "top": (newTop + cpt++) + "%"});

  } while (isCollision);
}

 function isInside (pt, div)
{
    var x = parseInt($(div).css("left"));
    var y = parseInt($(div).css("top"));
    var w = $(div).width () + borderWidth;
    var h = $(div).height ();

    if (pt[0] >= x && pt[0] <= x + w &&
        pt[1] >= y && pt[1] <= y + h)
        return true;
    return false;
}

function collision (div1, div2)
{

    var x = parseInt($(div1).css("left"));

    var y = parseInt($(div1).css("top"));
    var w = $(div1).width () + borderWidth;
    var h = $(div1).height ();
    var pos = [x, y];


    if (isInside (pos, div2))
        return true;
    pos = [x + w, y];
    if (isInside (pos, div2))
        return true;
    pos = [x + w, y + h];
    if (isInside (pos, div2))
        return true;
    pos = [x, y + h];
    if (isInside (pos, div2))
        return true;

    return false;
}

score 0 · Answer 3 · answered May 01 '15 at 14:57

Here's another implementation of collision detection close to what you asked for. The two main goals being:

move vertically more than horizontally (because boxes are wider than tall)
stay within a reasonable range from the origin

Here goes:

function yCollision($elem) {
    var $result = null;

    $('.label').each(function() {
        var $candidate = $(this);

        if (!$candidate.is($elem) &&
            $candidate.position().top <= $elem.position().top + $elem.outerHeight() &&
            $candidate.position().top + $candidate.outerHeight() >= $elem.position().top) {
            $result = $candidate;
            console.log("BUMP Y");
        }
    });

    return $result;
}

function xCollision($elem) {
    var $result = null;

    $('.label').each(function() {
        $candidate = $(this);
        if (!$candidate.is($elem) &&
            yCollision($elem) &&
            yCollision($elem).is($candidate) &&
            $candidate.position().left <= $elem.position().left + $elem.outerWidth() &&
            $candidate.position().left + $candidate.outerWidth() >= $elem.position().left) {
            $result = $candidate;
            console.log("BUMP X");
        }
    });

    return $result;
}

function fuzzyMoveY($elem, direction) {    

    var newTop = $elem.position().top + $elem.outerHeight() / 4 * direction;

    // stay in the canvas - top border
    newTop = (newTop < 0 ? 0 : newTop);

    // stay in the canvas - bottom border
    newTop = (newTop + $elem.outerHeight() > $("#labelzone").outerHeight() ? $("#labelzone").outerHeight() - $elem.outerHeight() : newTop);

    // stay close to our origin
    newTop = (Math.abs(newTop - $elem.attr("data-origin-top")) > $elem.outerHeight() ? $elem.attr("data-origin-top") : newTop);

    $elem.css({'top': newTop});
}

function fuzzyMoveX($elem, direction) {    

    var newLeft = $elem.position().left + $elem.outerWidth() / 4 * direction;

    // stay in the canvas - left border
    newLeft = (newLeft < 0 ? 0 : newLeft);

    // stay in the canvas - right border
    newLeft = (newLeft + $elem.outerWidth() > $("#labelzone").outerWidth() ? $("#labelzone").outerWidth() - $elem.outerWidth() : newLeft);

    // stay close to our origin
    newLeft = (Math.abs(newLeft - $elem.attr("data-origin-left")) > $elem.outerWidth() ? $elem.attr("data-origin-left") : newLeft);

    $elem.css({'left': newLeft});
}

function bumpY($above, $below) {        
    if ($above.position().top > $below.position().top) {
        $buff = $above;
        $above = $below;
        $below = $buff;
    }

    fuzzyMoveY($above, -1);
    fuzzyMoveY($below, 1);
}

function bumpX($left, $right) {        
    if ($left.position().left > $right.position().left) {
        $buff = $right;
        $right = $left;
        $left = $buff;
    }

    fuzzyMoveX($left, 1);
    fuzzyMoveX($right, -1);
}

$('.label').each(function() {
   $(this).attr('data-origin-left', $(this).position().left);
   $(this).attr('data-origin-top', $(this).position().top);        
});

var yShallPass = true;
var loopCount = 0;

while (yShallPass && loopCount < 10) {
    yShallPass = false;

    $('.label').each(function() {
        var $this = $(this);
        $collider = yCollision($this);
        if ($collider) {
            bumpY($this, $collider);
            yShallPass = true;
        }
    }); 
    loopCount++;
}

console.log("y loops", loopCount);

var xShallPass = true;
var loopCount = 0;

while (xShallPass && loopCount < 10) {
    xShallPass = false;

    $('.label').each(function() {
        var $this = $(this);
        $collider = xCollision($this);
        if ($collider) {
            bumpX($this, $collider);
            xShallPass = true;
        }
    }); 
    loopCount++;
}

console.log("x loops", loopCount);

This is not production code obviously but please report back if it helps.

Move absolute positioned divs off eachoter

3 Answers3