> -----Original Message-----
> From: James Smith [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, November 20, 2007 11:59 AM
> To: CF-Community
> Subject: RE: Drag and Drop like iGoogle
>
> That is exactly what I am after... Unfortunately I don't seem to be
> able to
> get it to work and since there are no install instructions I have no
> idea if
> I have done everything corrently!
I've actually been playing with this since you brought it up.
I added collision detection to my library (a fun and useful little exercise
in and of itself) but after considering the problem I think it's easier than
that.
Basically I think you need this:
1) A drag and drop routine. This is easy (there's an example at my site).
Drag your panels around, let go.
2) A "Stick" routine, or limiter. Since (I'm assuming) your columns will be
horizontally static the first thing to do will be to place your dragged
element onto the closest column. This would set just the horizontal
position. Assuming three columns at 100, 200 and 300 pixel something like
this (psuedocode):
if (LeftPos < 150) {
setLeftPosition = 100;
} else if (LeftPos < 250) {
setLeftPosition = 200;
} else {
setLeftPosition = 300;
};
You could do this in the drag routine as well, but for now let's divide and
conquer. In any case you now have all elements "pinned" into a column.
3) A Sort routine. This is the deceptively simple aspect that escaped me
for a while. At this point everything is in the columns you want and in the
order you want: they just overlap.
So what you need to do is sort your columns by vertical position of the
elements.
Grab the "Top" position of each element in a column and sort it from
smallest to largest - that's the order of the items in the column. (They're
already there in order visually).
Another way to do this would be to loop from the top of the page to bottom -
from the zero pixel to the nth pixel and see if an element is there - the
equivalent of scanning the page visually. This might be too slow for large,
complex pages but it might also be just the ticket.
4) Positioning Routine. Now you've got all your elements in the right
columns and you know what vertical order they need to be in. So all you do
is loop from the first to last and reposition. Something like this:
var CurPostion = TopOfColumn;
for ( each Panel in Column1 ) {
// Set the position of the panel
Panel.setTop(CurPostion);
// Calculate the position for the next panel in line
CurPostion = CurPostion + Panel.getHeight() + MarginBetweenPanels;
};
And that's it.
You don't really need any collision detection since your position is better
inferred by the actual position of the elements. All you really need to
know is the vertical order of the elements to be positioned and have a (very
simple) routine to spread them out so they don't overlap.
The tricky thing (and it's really just because there's so many ways to do
it) is the sort... but that's also a perfect example of something to be
abstracted into a library.
I'm thinking there'll be a method on the panel manager that will return an
array of all panels sorted by some property (height, width, top, left,
opacity, etc). Once that's done doing your display will be a couple dozen
of lines or so tops.
Jim Davis
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
ColdFusion 8 - Build next generation apps
today, with easy PDF and Ajax features - download now
http://download.macromedia.com/pub/labs/coldfusion/cf8_beta_whatsnew_052907.pdf
Archive:
http://www.houseoffusion.com/groups/CF-Community/message.cfm/messageid:246844
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.5
