

Show HN: Drag-and-drop library for 2D, resizable and responsive lists - skidding
https://github.com/ubervu/grid

======
mc_hammer
This is really nice. As someone who has worked with the competition libs
masonry, packery, and gridster, I know why you built this and it looks great
so far. All have their oddities or missing features.

Can you sort items on this programatically? If so very cool, its one feature
packery is missing.

On feature I (need) think is missing is the ability to freely place an item in
the bottom-right side with gaps in between it and other items - for example in
the bottom right corner of the parent container. I could really see this being
requested in a dashboard type use.

~~~
skidding
> Can you sort items on this programatically?

Yes you can. The grid is generated left-to-right > top-to-bottom, based on a
1d index inside a list. So you can sort the unidimensional array of items
however you want, and then regenerate 2d positions based on that.

> On feature I (need) think is missing is the ability to freely place an item
> in the bottom-right side with gaps in between it and other items

You can't right now without a few tweaks, but once we start accommodating for
more options this will definitely be included. We have a certain _force_
called "pull to left" that can be replaced with "pull to top" or just don't
pull, let the items be where they are placed, etc.

This was just our use-case, waiting for others to surface and see where this
can go.

------
Buetol
The demo link is a bit hidden, here it is for people who wandered like me:
[http://ubervu.github.io/grid/](http://ubervu.github.io/grid/)

~~~
skidding
Thanks, I added a more explicit link in the README file. It appears people
don't really look in the repo header for the appointed hompage

------
emn13
So this is definitely cool, but I'm not quite seeing what the purpose or aim
is.

Is the demo an accurate representation of the entire functionality?

If so, why do things "fall back" toward the left? Sometimes this jumbles the
layout of other blocks quite a bit. I guess this brings me back to my original
question: what's this for?

Finally, the UI component being a jquery plugin strikes me as being a
downside. Though I use jquery all the time, components tend to be a little
brittle when it comes to heavily dynamic sites (i.e. knockout/angular/react
whatever), and given that jquery itself isn't trivial, adding lots of
components to it makes me a little leery of the upgrade process (also
something I've witnessed problems with).

~~~
skidding
Well we're building a platform for Social Media Monitoring, with Dashboards
made of resizable, responsive and composable Widgets. This grid offers you the
possibility to generate customized dashboards populated with various types of
data and visualizations. We wanted dashboards to be easy to create but also
accommodate various screen sizes or device types. You can have one row for
phones and 6 for status monitors in the lobby. etc.

The grid actually works on a principle called "pull to left." It was a UX
decision in the end. "Left" is because the grid is designed horizontally (but
should be made an option to use the other axis very easily), and "pull" is
because we found (after much usability testing) that if you don't have any
_force_ in a drag and drop system, items will involuntarily continue to move
away from each other as you move them around and collisions occur.

I get where you come from with the jQuery plugin. However, due to many reasons
(including time and reducing in-house complexity) jQuery was advantageous for
its build-in drag and drop capabilities. But the good part is that we still
separated most of our logic from the jQuery plugin, into abstract positioning.
The jQuery plugin just transforms grid data into pixels and lays them around.
There are many reasons why this is cool. 1. Very fast unit tests ran with
Node, 2. Grid positions can be generated server side, etc.

------
Edmond
Nice, though not sure about utility...are you interested in working on a UI
builder such as this : [http://crudzilla.com/assets/img/info-graphics/dnd-
demo-clipp...](http://crudzilla.com/assets/img/info-graphics/dnd-demo-
clipped.gif)

I would be happy to discuss :)

------
vuzum
Guys, how is this different from [http://gridster.net](http://gridster.net)?
Or is Gridster done by you?

~~~
skidding
This is a very relevant question, added an elaborate answer directly in the
project README: [https://github.com/uberVU/grid/blob/master/README.md#faq-
why...](https://github.com/uberVU/grid/blob/master/README.md#faq-why-not-
gridster)

------
WhitneyLand
Is it supposed to be touch enabled? Tried the demo on a mobile device and
didn't seem to drag...

~~~
skidding
We use jQuery.draggable for drag and drop, which I don't think supports touch
events. But there are more ways to add touch events to jQuery UI and in the
end the drag and drop / plugin part is so decoupled that it can be replaced at
any time. It's also the part we invested the least in so far, we wanted to
have solid grid positioning and collision management first.

------
jamespollack
this is really nice. well done

------
ibash
Very nice!

------
dang
This post got nailed by the voting ring detector, but I'm restoring it because
we want to see original work on HN.

Please everybody, don't ring-vote your posts; just take your chances with HN's
randomness. If a post is solid and hasn't gotten any attention yet, a couple
of reposts is ok. Be careful not to abuse that, since we eventually penalize
accounts for reposting too much. Send questions to hn@ycombinator.com.

~~~
compare
So many original content posts have been nailed by the voting ring detector. I
can almost guarantee that many of those "friends asking friends for votes"
usually have no connection to the original author at all. Maybe it's just
friends sharing things with each other... I really wonder how accurate
training / testing data could be gathered for this classification task. Maybe
it needs to be refreshed.

Anyway thanks for bringing original content back to HN. Anyone know if there's
a demo page for this library?

~~~
mihneadb
There is! [http://ubervu.github.io/grid/](http://ubervu.github.io/grid/)

