search

hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

Add extraColumns option #55

Closed bfischer1121 closed 9 years ago

bfischer1121 commented 9 years ago

Had 2 reasons for needing this...

NiGhTTraX commented 9 years ago

My default width for new items is 2 (with the option to resize to 1), so by default users can't drag items to the extra column (never drags past the 50% mark).

We updated the plugin to take into account the largest item in the grid when adding extra columns at the end. This way we could make the extra column as wide as the widest item in the grid. See b9d88482e76964a41534b9609d441a97ea04fd6d.

I have a read-only mode that the user can toggle to edit mode, and the extra column doesn't look good when in the first mode.

You can work around this by manually updating the grid's width after rendering the grid. Ugly, I know.

I don't like that you added a setter function for the columns options. If we ever want to enable dynamic updates for a grid instance then we should go all the way and do something like jQuery UI's option method. If we do this we could also add a read only attribute that would toggle the extra room at the end of the grid.

bfischer1121 commented 9 years ago

Thanks @NiGhTTraX et al for the more generic solution. I did a quick compare and believe #_onStart needs to incorporate the max width into this._maxGridCols (somewhat implicitly assumes 1 extra column).

+1 for the option method. didn't know about that

NiGhTTraX commented 9 years ago

I did a quick compare and believe #_onStart needs to incorporate the max width into this._maxGridCols (somewhat implicitly assumes 1 extra column)

The maxGridCols variable is used when calculating the new position for the currently dragging item. It's +1 to allow placing an item at the end of the grid. Even if the item is wider than 1, you can only place it — by positioning its top left corner — at most 1 column further than the last widget in the grid.

bfischer1121 commented 9 years ago

Ok, that makes sense now. I had the wrong idea about its purpose. Thanks.