ajax farmville-style functionality

I'm a php programmer building a site that needs a bit of ajax functionality. What I need is just a small script that will provide this functionality and I will then modify it to use on my website. So, you do not need to create an entire web application or an entire program, just one script.

Here's what I need:

Imagine a web page with an image of a 100 pixel square on it. Below that, there is a green div rectangle of 500 x 400 pixels.

If a person clicks on the square, their cursor changes to an image cursor instead (for example an image of a tool), when they move their cursor to the rectangle below, an additional square appears below their cursor (as if they were dragging it), they can then place it anywhere in that rectangle with a snap to grid functionality by clicking down. Once they place it with a click, a copy of the square stays in place within the rectangle wherever they clicked down. A new square appears below their cursor and they can again (with a snap to grid functionality) place the new square easily next to the existing one (or anywhere else they want within the rectangle). They can keep doing this as long as they want. When their cursor leaves the rectangle the square that was attached to their cursor disappears. When they click on any other button, the cursor changes back to a regular cursor.

This sounds complex, but basically what I need is similar to what you do in farmville when you click on the picture of a hoe. Your cursor changes to a small hoe and an outline of a square appears under your cursor in any area where you can place the square (in my version that's only within the rectangle). You can then move your cursor around (and the square moves with you) and click down anywhere to place it. A new square appears and you can place that next to or below your existing one (this is where the snap to grid is important to make it easy to position squares next to each other) or anywhere else you want.

If you've ever played farmville you know what I mean. In farmville it's done with flash, and I need it done with javascript instead. It is for a gardening design tool, that's why the functionality is similar to farmville. Again, I only need one html page with javascript that gives me the functions I need to do the above things. I'll then build my tool around it and customize it to my needs. I already know how to turn a cursor into a custom image, the main thing I don't know how to do is make the square appear when you're in the rectangle, to make it snap to a grid when you place it, and to make another copy of the square appear as soon as you've placed it. You can use whatever images you want, just make some blank ones. It doesn't matter since I'll change it to whatever images I need.

I tried doing this myself using the drag and drop functionality that comes with jquery (which has a nice snap to grid function), but it doesn't allow you to drag and drop without holding down the left button. I need it to work without having to hold down the left button.

Compétences : AJAX, Javascript

Voir plus : ajax farmville, want position, where played, work style, website div create, web design drag drop, turn website application, things know building website, snap programmer, snap on, php style, make picture, hold tool, hoe make website, green building design, easy design tool, build whatever want, build green, application functionality, rectangle, next move, leaves, jquery grid, html style, html php jquery programmer

Concernant l'employeur :
( 0 commentaires ) Pflugerville, United States

N° du projet : #1030083

2 freelance ont fait une offre moyenne de 175 $ pour ce travail


ajax/php experienced

250 $ USD en 3 jours
(9 Commentaires)

Hello I am highly interested in ur project. Please check PMB.

100 $ USD en 3 jours
(3 Commentaires)