

Show HN: gridster.js, a drag-and-drop grid plugin that actually works  - dmarinoc
http://gridster.net/

======
simulate
What are some example use cases? Judging from comments so far, several people
need this and plan to use it but I'm having a difficult time thinking of use
cases, other than puzzle games.

~~~
aitorciki
We built it for our own product, Ducksboard. Users can build their own metrics
dashboards by adding widgets and arranging them as they like.

That's the use case: being able to arrange/sort a set of widgets by dragging
and dropping them in an grid. Puzzles, dashboards, image collections, think of
any thing built of visuals elements where order counts.

~~~
schrijver
Nice, could be really useful for WYSIWYG web design in general. My first
impulse was to try and resize the edges of the boxes, have you thought of
implementing this?

------
bjt
Very impressive! It's not an easy thing to do
([http://metafizzy.co/blog/mythical-drag-drop-multi-column-
gri...](http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-
plugin/)).

I've been trying to fake it on a recent project for Stanford's recent HCI
online class (see <http://btubbs.github.com/slapdash/>), but Gridster looks
much nicer. Will be switching.

------
eranation
Nice! and indeed needed... How do you handle scroll areas? can one column be
independently scrolling? that was my main pain point with JQueryUI
draggable...

Note that your "Fork me on github" banner points to <http://github.com/you>,
which shows me MY profile page :)

~~~
aitorciki
When the mouse pointer gets close to the bottom of the viewport while dragging
an element we scroll the document. Columns are not scrolled on their own,
since the whole grid is a "block".

We built it because jQuery sortables were limiting us to use separate columns,
which couldn't handle "wide" (more than 1 column in width) elements.

Sorry for the wrong link, we fix it right now!

------
Argorak
This has very interesting drawing bugs in Safari 6 (Mountain Lion):

[http://dearmacos.tumblr.com/post/28341302336/computer-
graphi...](http://dearmacos.tumblr.com/post/28341302336/computer-
graphics-101-drawing-rectangles-props)

~~~
aitorciki
Oops, no Mountain Lions around, was tested and worked ok on Lion's Safari.

Will have a look at what can be done, thanks :)

~~~
spicyj
I've been seeing this in many sites including Gmail and Facebook so it's
probably not your bug.

------
wmblaettler
Very nice! Any tips/issues on making it responsive to the window size? Having
just viewed at the demo and not really digging into the code, I am not sure if
this is rather obvious or not. Thanks!

~~~
aitorciki
Not supported at the moment :(

We've started by building something to fulfill our needs, and responsiveness
wasn't in the list for a first version.

Some logic is ran on browser resize, but the grid itself is not resized.

We'd love to add it to future releases!

------
Hikari
This is the best dnd layout manager I have seen so far and trust me I have
played with a lot of them. There is of course some improvement that can be
made but that is what github is for. I really hope this project will get
enough traction to warrant updates and new features. great job

------
jsmcallister
Very nice. Hopefully there's a simple way to take the serialized position
array and parse out an order. Would be nice to use this plug-in to allow users
to easily rank and group objects.

~~~
aitorciki
You actually can.

Have a look at the serialize() API method, as well as the serialize_params
options attribute.

It's what we use at Ducksboard to let users arrange widgets in their
dashboards.

------
wmblaettler
Does this implement any auto-layout / best fit methods given a random set of
tiles?

~~~
aitorciki
There is a "top gravity" attracting widgets towards the top end of the grid.
It's the only supported auto-layout feature currently.

We'd like to allow different strategies in the feature, we just started by the
one we needed.

------
halis
Very nice, does the license allow this to be used in a commercial project?

~~~
aitorciki
Sure, it's licensed under MIT :)

------
ipedrazas
Well done guys!

You're going to make my children very happy indeed!

------
manuscreationis
Any examples of this integrating with Twitter Bootstraps layout?

~~~
aitorciki
Hi there.

The only current integration of the tool is Ducksboard, where we use it to
handle widgets arrangement.

The documentation is pretty extensive anyway, it should be easy to integrate
anywhere.

~~~
manuscreationis
Thanks, I may end up taking a look at this...

------
Ethervoid
Cool! As soon as i come home i'm going to try it

------
hamorim
Nice! Really cool!

------
ivanloire
really cool stuff.. :)

------
wseymour
Wow, I've been looking for something like this for a while now, and this is
_really_ impressive. Good work!

