I am using prototype to write up a seating chart type page. Basically this page will allow users to place items in a “room” (div) and move these around. I am new to prototype and noticed their position methods were depreciated.
So I wrote a function by hand, but I think there must be an easier way to do what I am attempting.
What I am attempting to do is find a position inside of a div that does not already have a smaller inner div there. I have an array “items” filled with all of the locations of divs already there and when I place a new div I try to place it at position 10,10 and check its corners to make sure it doesn’t overlap any of the current divs. And reiterate if a div is there. Here is my function:
[CODE]
getPlacement: function (type) {
var offset = 10;
var current = {
x: 10,
y: 10
};
var overlay = true;
var itemWidth = globalDimensions[type].width;
var itemHeight = globalDimensions[type].height;
while (overlay) {
overlay = false;
if( (current.x + itemWidth) > globalDimensions[‘room’].width) {
current.x = 10;
current.y = current.y + 20;
}
for(var i = 0; i < items.length; i++) {
var div = $(items[i].divID);
var move = false;
if ((current.x >= div.offsetLeft && current.x <= (div.offsetLeft + div.offsetWidth)) &&
(current.y >= div.offsetTop && current.y <= (div.offsetTop + div.offsetHeight))) {
move = true;
}else if (((current.x + itemWidth) >= div.offsetLeft && (current.x + itemWidth) <= (div.offsetLeft + div.offsetWidth)) &&
(current.y >= div.offsetTop && current.y <= (div.offsetTop + div.offsetHeight))) {
move = true;
}else if ((current.x >= div.offsetLeft && current.x <= (div.offsetLeft + div.offsetWidth)) &&
((current.y + itemHeight) >= div.offsetTop && (current.y + itemHeight) <= (div.offsetTop + div.offsetHeight))) {
move = true;
}else if (((current.x + itemWidth) >= div.offsetLeft && (current.x + itemWidth) <= (div.offsetLeft + div.offsetWidth)) &&
((current.y + itemHeight) >= div.offsetTop && (current.y + itemHeight) <= (div.offsetTop + div.offsetHeight))) {
move = true;
}
if(move) {
current.x = (div.offsetLeft + div.offsetWidth) + offset;
overlay = true;
break;
}
}
}
return current;
}
This does work with an issue if I run out of room and go beyond the y boundary… but I will work on that more later. I was just wondering if there is already functionality out there that can handle this easier and cleaner??
Anyone have any suggestions? questions?
Thanks in advance