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 ;)
