/    Sign up×
Community /Pin to ProfileBookmark

Easier Position method?

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;

}
[/CODE]

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

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@justinbarneskinAug 12.2010 — fill table cells
×

Success!

Help @smh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...