Welcome to WebmasterWorld Guest from 54.147.220.66

Forum Moderators: open

Message Too Old, No Replies

drag and drop into div or canvas

   
4:42 pm on Jan 15, 2013 (gmt 0)

5+ Year Member



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.
4:21 am on Jan 18, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

Please do, all I see is a race track ?
1:14 pm on Jan 18, 2013 (gmt 0)

5+ Year Member



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.
5:27 pm on Jan 18, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Why not make it one big area that accepts the drop and then calculate in which "rectangle" it was dropped yourself ?
5:49 pm on Jan 18, 2013 (gmt 0)

5+ Year Member



because i need to count how many rectangle the car travel
7:24 pm on Jan 18, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.