I just discovered the "grid" option for the Drag object, which kind of makes me go for approach 3 - just need to find a quick and painless way to see if items overlap :)
On Feb 16, 4:01 pm, gabriel munteanu <[email protected]> wrote: > 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 ;)
