Jquery want to position 50 divs around the top left bottom and right of page without overlapping

Question

Hi, I would like to re-position around 50-60 divs of height - 50px width - 50px around the page absolutely using jquery but I want it so that they dont overlap any other div , there is a centered DIV on the page of Height : 700px , Width : 900px . I want these 50 divs to be around it and not overlap any other div or the centered DIV , so I was thinking of making an big array where I pre-define all the left and top position of each 50-60 divs and then reposition each div using for or each statement , but I could not succeed ,Can anyone guide me please ?

Thanks in advance.

Aimash

Answer 1

Hi Aimash,

I also have same issue. I tried with this below script, it is working fine. But it is stopping because of "too much recursion" error :(

function checkingElementOverlapDroped(_cid) {
 var position = $(_cid).position();
 var endPosition = { endLeft: position.left + $(_cid).width(), endTop: position.top + $(_cid).height() }
    //For each start
 $("div").each(function() {
 var vertical = false, horizontal = false;
    if ($(this).css("display") != "none" && $(this).attr('id') != $(_cid).attr('id')) {            
                var currentEleposition = $(this).position();
                var endcurrentElePosition = { endLeft: currentEleposition.left + $(this).width(), endTop: currentEleposition.top + $(this).height() }
                //Checking for same horizontal
                if ((currentEleposition.top <= endPosition.endTop && endcurrentElePosition.endTop >= endPosition.endTop) || (currentEleposition.top <= position.top && endcurrentElePosition.endTop >= position.top)) {
                    horizontal = true;
                }
                //Checking for same vertical
                if ((currentEleposition.left <= endPosition.endLeft && endcurrentElePosition.endLeft >= endPosition.endLeft) || (currentEleposition.left <= position.left && endcurrentElePosition.endLeft >= position.left)) {
                    vertical = true;
                }
                //Checking for same vertical  if current element width is small then dragged element
                if ((currentEleposition.left >= position.left && endcurrentElePosition.endLeft <= endPosition.endLeft)) {
                    vertical = true;
                }

                if (horizontal && vertical) {
                    if (($("#CenterDiv").width() / 2) <= endcurrentElePosition.endLeft)
                        $(_cid).css('left', (currentEleposition.left - 30));
                    else
                        $(_cid).css('left', (endcurrentElePosition.endLeft + 10));
                    if (($("#CenterDiv").height() / 2) <= endcurrentElePosition.endTop)
                        $(_cid).css('top', (currentEleposition.top - 30 + ($("#CenterDiv").scrollTop())));
                    else
                        $(_cid).css('top', (endcurrentElePosition.endTop + 10 + ($("#CenterDiv").scrollTop())));
                    checkingElementOverlapDroped(_cid)
                }

        }
    });
    //For each ends
}

If you get any better solution please let me know.

Thanks, Naga Harish.