"grid", however, doesn't play well with "container", unfortunately :(
As seen here: http://mootools.lighthouseapp.com/projects/2706/tickets/56-drag-base-problem-with-option-grid-and-container the problem is acknowledged and will be solved in 1.3 :) On Feb 16, 4:12 pm, r4zv4n <[email protected]> wrote: > 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 ;)
