Square collisions function
I am implementing a sort of grid, similar to the one you can find in
the iGoogle page, where you can move panel around and do your stuff.
Since I am new with jQuery UI, I probably wasted my time doing
something that was just there and easily implementable.
Anyway, I have created a function that is capable to understand
collisions between a node A, and a node B, basing its computations on
squares objects.
A square object is an object that will contain top, left, width, and
jeight keys. e.g.
var div = $("#mydiv"),
square = {
top:div.position().top,
left:div.position().left,
width:div.width(),
height:div.height()
};
To know, during dragging, if the div is catching another one, instead
of create N droppables target, that could be both droppable, and
draggable, you can simply use this function returned value, inside
your draggable "drag" option.
function collision(A, B){
// most used numbers to compare
var At = A.top, Al = A.left, Bt = B.top, Bl = B.left;
// top and down square collision
return ((Bt <= At && At <= (Bt + B.height)) || (At <= Bt && Bt <=
(At + A.height))) &&
// left and right square collision
((Bl <= Al && Al <= (Bl + B.width)) || (Al <= Bl && Bl <=
(Al + A.width)))
};
That will return true, only if objectSquareA, dragged div, for
example, is catching objectSquareB, a possible target.
I do not have a clue if anybody will never use this function, but
since it is solving a lot of problems, speeding up my development, I
am sure that, at least, I will use them again :D
Kind Regards
( ... and please, if this is nothing new, do not put me in the daily
WTF site, thank you :D )