Live data from Hacker News

GridList – Drag and drop library for a 2D resizable and responsive list of items

ubervu.github.io

11–20 of 21 posts

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#11
post #8

Neat, but the zoom works the opposite way that I'd expect, is that just me?

It was reversed up until a few days ago, when I was told "adding/removing rows works the opposite way that you'd expect it" heh

Either way it's just two API calls in the demo page, the buttons aren't part of the lib itself

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#12

Shame it uses the bloated jquery UI

Not a big fan of jQuery UI myself, but just the dragging capabilities are built on top of jquery.draggable, the rest is jQuery and even DOM agnostic.

We build the lib into two components. There's the jQuery-dependent one that just powers the UI interaction and translates cols and rows into pixels for DOM elements. Then there's the main logic, which is an agnostic class that implements all the grid positioning and collision management logic. This makes it possible to calculate new grid positions on the server-side. Same with running unit tests.

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#13
I don't see why the items should dance around when "zooming out"/adding more rows, if the available space and constraints are the same. Is there a gravity component to it?

http://cl.ly/image/1E0A0z2C0x0b -> http://cl.ly/image/102E232Z443j

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#14

I don't see why the items should dance around when "zooming out"/adding more rows, if the available space and constraints are the same. Is there a gravity component to it? http://cl.ly/image/1E0A0z2C0x0b -> http://cl.ly/image/102E232Z443j

Well we're trying to 1. occupy as much empty space as possible and then 2. preserve as much as possible of the horizontal order of items when resizing the grid

PS. We have some docs for these methods https://github.com/uberVU/grid#resizegridrows

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#18
post #8

Neat, but the zoom works the opposite way that I'd expect, is that just me?

It was reversed up until a few days ago, when I was told "adding/removing rows works the opposite way that you'd expect it" heh Either way it's just two API calls in the demo page, the buttons aren't part of the lib itself

This is possibly because the buttons aren't labeled. Depending on whether you see them as "zoom in/out" buttons or "add/remove columns" buttons, your expectation is going to be different.

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#19

Changing my browser window width doesn't seem to affect anything. Even after a page reload. It doesn't seem responsive at all. Am I missing something?

It's a horizontal grid, so it's responsive when you change height and it scrolls horizontally.

Take a look at the project README for more info: https://github.com/uberVU/grid/blob/master/README.md

Re: GridList – Drag and drop library for a 2D resizable and responsive list of items

#20

Earlier quoted context omitted.

It was reversed up until a few days ago, when I was told "adding/removing rows works the opposite way that you'd expect it" heh Either way it's just two API calls in the demo page, the buttons aren't part of the lib itself

This is possibly because the buttons aren't labeled. Depending on whether you see them as "zoom in/out" buttons or "add/remove columns" buttons, your expectation is going to be different.

You're right, the demo is far from user friendly. Thing is we completed 90+% of the current functionality last year and then kept working on integrating it internally and the rest of our milestone. At this point so much time had passed that the open source prospects almost disappeared, so I decided it was now or never to release it to the public, since we had 4 months to "prepare" it and nothing happened. To see it gather over 1000 stars on Github is mind boggling, I didn't expect 100 honestly. The demo page is what I put together when showing the grid around internally as work in progress.
Post reply on HN