Question

I have been working on this for hours, and I just can’t figure it out,

Let’s say I have a lot of divs with floating around, with jquery draggable attached to them so, their position keeps changing all the time.

Now I want to be able to space them out vertically, so the space between each div would be the same, one of the biggest issue is that each div’s height also keeps changing.

Each time I try to do it right i just write ~100 lines of code I just get lost in confusion, maybe there is some easy way to do it, by the way, here is example of how it looks like, I didn’t include any of my written code since it doesn’t make much sense.

http://jsfiddle.net/M6PmM/

Answer 1

It’s interesting to see the different interpretations of your question. When I think of aligning vertically, I think of Adobe Illustrator, and how you can evenly space a number of selected shapes. To that end, you could so something like this:

NOTE: this could easily be adapted to maintain an even gap between the elements, regardless of their individual heights.

$('.align').click(function() {

    // Cache the elements
    var $obj = $('.obj');

    // Sort them by offset top
    $obj = $obj.sort(function(a, b) {
        return $(a).offset().top - $(b).offset().top;
    });

    // Get get the offset of the first and last elements
    // NOTE that we included the last element's height... you may need to tweak it
    // here due to CSS borders adding to the height
    var firstOffsetTop = $obj.first().offset().top;
    var lastOffsetTop = $obj.last().offset().top + $obj.last().height();

    // The new container height is the difference between the first,
    // and last element's position
    var containerHeight = lastOffsetTop - firstOffsetTop;

    // Determine the gap between each element, based on the height of the container
    // divided by the number of elements
    var spacing = containerHeight / $obj.length;

    // Assign top properties
    $obj.each(function(i, el) {
        $(this).css('top', (i * spacing) + firstOffsetTop + 'px');
    });

});