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.
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.
Here's a link to my sample page for this:
I'm also attaching the files for this page.
Please let me know if I need to clarify something about the project.