drag and drop into div or canvas

[skoff]

Hi everyone! I'm working on something and i need your help. What i want to achieve is to be able to drag and drop a div or whatever i would need into a div or a canvas. This is the point where i'm stuck at.. Take a look a this picture and you'll understand better what i want.
Image here --> [img607.imageshack.us ]

Every "rectangle" delimited by grey borders i want them to be as a droppable div or canvas so i can drag a div or other element in it. The reason why im asking this is because i dont know how i could do this because all of these "rectangle" are not perfect rectangles and i cant use a table or divs to achieve what im after.

So if you have any idea how i could do that it would be great. If im not clear enough let me know and i will try to explain.

[daveVk]

If im not clear enough let me know and i will try to explain

Please do, all I see is a race track ?

[skoff]

what i want to do is make every "rectangle" on the racetrack as a canvas or a div so i can drop element in it with jquery.

[swa66]

Why not make it one big area that accepts the drop and then calculate in which "rectangle" it was dropped yourself ?

[skoff]

because i need to count how many rectangle the car travel

[Fotiman]

I would think you could still do that with one big area. Lets simplify the example: imagine if your area was just a 5px x 3px rectangular shape (15 points total area).

 01234
 +-----+
0|.....|
1|.....|
2|.....|
 +-----+

Given a point within that area, you could map it to a specific sub-division:

 01234
 +-----+
0|AABBC|
1|ABBCC|
2|BBCCC|
 +-----+

For example, shape "A" is somewhat triangular in shape and consists of 3 points:
0,0
1,0
0,1

Shape "B" is like a diagonal line consisting of points:
2,0
3,0
1,1
2,1
0,2
1,2

And Shape "C" is also triangular, consisting of points:
4,0
3,1
4,1
2,2
3,2
4,2

So, given any point, you can tell exactly which shape it is.