i would go for approach 2. you can check the source in this game - http://www.e-forum.ro/bomberman/dynagame.html , which has a grid of absolute positioned DIVs in a relative positioned DIV container. it has the same architecture, all elements are represented as mootools Objects, and computations are done among js objects. they touch the DOM only when necessary. you could go for approach 3, it will be faster performance wise, and you will do eventually the more complex computations in RAM, but as I see it, you don't need performance as much as i did for the game, and for example, when the user drags a droppable over an area, maybe you want to change the background color of that one to emphasize where he is going to drop it, and this is so much easier when you got divs beneath to color.
regards, jgabios On Mon, Feb 16, 2009 at 2:50 PM, r4zv4n <[email protected]> wrote: > > Hi guys, > > I the application I'm building I have a list of items that need to be > dragged and dropped onto a grid. The grid has squares as the base unit > and the items are either 1, 4 or 9 squares in size (also square > shaped). > > I need to let the user drop an item on the grid only if it does not > overlap with previously placed items. > > Before I jump in and start coding, I need to make sure I have a good > concept for how to do this. An here's where you guys come in :) - I > need you to have a look at the alternatives I've thought of and > comment on them or even help me with new ones. > > * Common concepts: > > The grid will be represented as a bi-dimensional array of true / false > values (i.e. a matrix) and I'll be able to check if a square is > "droppable" if all the squares underneath it are true. I will also > have references to the html element of a given cell in my object. > > * APPROACH 1: build the grid as an html table > > + easier CSS / cross-browser compatibility > + markup more semantic > - I would need specific CSS to "connect" table cells in order to make > a 4 / 9 unit square > - no ideas on how to drop a 4 unit square (for the 1 / 9 unit I check > if the cells under / around the cursor are free - for the 4 unit.. > maybe create a secondary grid with squares placed at the intersection > of the initial 4 squares?) > > * APPROACH 2: build the grid out of absolutely positioned / floated > divs > > + less markup than a table > + easier to add a row / column > - harder to have cross-browser CSS > - same question for dropping a 4 units square > > * APPROACH 3: use one large area for dropping and a "virtual" grid > (i.e. when an item is dropped, snap it to the closest grid area and > see if it does not overlap with previously placed items) > > + easiest CSS > + easiest JS code for init and dropping > - complex (?) calculations for snapping to grid / collision detection > > > So, the questions are: > > - how would *you* do this? > - if you would go at it by any of the methods I mentioned, what other > advantages / disadvantages would you see? > > Thanks in advance for any suggestions / help ;)
