homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
drag and drop into div or canvas
skoff




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

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




msg:4537021
 4:21 am on Jan 18, 2013 (gmt 0)

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

Please do, all I see is a race track ?

skoff




msg:4537115
 1:14 pm on Jan 18, 2013 (gmt 0)

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




msg:4537167
 5:27 pm on Jan 18, 2013 (gmt 0)

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

skoff




msg:4537175
 5:49 pm on Jan 18, 2013 (gmt 0)

because i need to count how many rectangle the car travel

Fotiman




msg:4537218
 7:24 pm on Jan 18, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved