How do I generate a dynamically sized grid for drag and drop?
I've never worked with Ajax before but I've been reading up on it and done some basic tutorials and am comfortable with the concept of asynchronous communication and how everything works from a technical communication perspective. That being said I have no idea where to start on this project which seems like it should be fairly simple.
1. the browser will have a "working area" which is a rectangle of some decent size, there will be a toolbar of objects on the left hand side.
This work area should be shown as a grid that the objects will be placed into.
The size of this grid (basically the gridlines) will need to be generated automatically based on user input (also the size of the components/objects that will be dragged in and the size of the rectangle) if it is too large (say 500) i'd like a way to pan around and zoom in as well...
2. For simplicity say there are 2 components: Available, unavailable and an erase feature.
3. each object when dragged to the working area should create an object that has some properties (handled programatically from input elsewhere on a simple form) I will be placing these in a database server side.
4. I'd like to be able to drag across the grid to continuously add the selected object and I'd like to be able to click a button on the edge of the grid to fill in the entire row with the objects.
From everything I've read on this it seems like this should be somewhat easy but again I don't know what framework to use to start. I'll be putting this in a drupal site and integrating it with a few modules if that makes a difference (i think that part of the programming will be separate from whatever specific implementation I use to get this Ajax part up though)
Thanks guys!