5 ms·

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

106 points by dmarinoc 14y ago

manuscreationis 14y ago
Any examples of this integrating with Twitter Bootstraps layout?
- aitorciki 14y ago
  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 14y ago
    Thanks, I may end up taking a look at this...
eranation 14y ago
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 http://github.com/you, which shows me MY profile page :)
- aitorciki 14y ago
  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!
ipedrazas 14y ago
Well done guys! You're going to make my children very happy indeed!
ivanloire 14y ago
really cool stuff.. :)
Ethervoid 14y ago
Cool! As soon as i come home i'm going to try it
jsmcallister 14y ago
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 14y ago
  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.
hamorim 14y ago
Nice! Really cool!
wseymour 14y ago
Wow, I've been looking for something like this for a while now, and this is _really_ impressive. Good work!
Argorak 14y ago
This has very interesting drawing bugs in Safari 6 (Mountain Lion): http://dearmacos.tumblr.com/post/28341302336/computer-graphics-101-drawing-rectangles-props http://dearmacos.tumblr.com/post/28341302336/computer-graphi...
- aitorciki 14y ago
  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 14y ago
    I've been seeing this in many sites including Gmail and Facebook so it's probably not your bug.
bjt 14y ago
Very impressive! It's not an easy thing to do (http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/ http://metafizzy.co/blog/mythical-drag-drop-multi-column-gri...). I've been trying to fake it on a recent project for Stanford's recent HCI online class (see http://btubbs.github.com/slapdash/ http://btubbs.github.com/slapdash/), but Gridster looks much nicer. Will be switching.
simulate 14y ago
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 14y ago
  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 14y ago
    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?
- benblodgett 14y ago
  I use something similar to allow users to manage the order in which images show up on their listings. (we provide a service for people to buy/sell cranes)
wmblaettler 14y ago
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 14y ago
  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!
halis 14y ago
Very nice, does the license allow this to be used in a commercial project?
- aitorciki 14y ago
  Sure, it's licensed under MIT :)
- deleted 14y ago
  [deleted]
wmblaettler 14y ago
Does this implement any auto-layout / best fit methods given a random set of tiles?
- aitorciki 14y ago
  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.
Hikari 14y ago
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

106 points by dmarinoc 14y ago

manuscreationis 14y ago

Any examples of this integrating with Twitter Bootstraps layout?

aitorciki 14y ago
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 14y ago
  Thanks, I may end up taking a look at this...

eranation 14y ago

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 http://github.com/you, which shows me MY profile page :)

aitorciki 14y ago
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!

ipedrazas 14y ago

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

ivanloire 14y ago

really cool stuff.. :)

Ethervoid 14y ago

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

jsmcallister 14y ago

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 14y ago
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.

hamorim 14y ago

Nice! Really cool!

wseymour 14y ago

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

Argorak 14y ago

This has very interesting drawing bugs in Safari 6 (Mountain Lion): http://dearmacos.tumblr.com/post/28341302336/computer-graphics-101-drawing-rectangles-props http://dearmacos.tumblr.com/post/28341302336/computer-graphi...

aitorciki 14y ago
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 14y ago
  I've been seeing this in many sites including Gmail and Facebook so it's probably not your bug.

bjt 14y ago

Very impressive! It's not an easy thing to do (http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/ http://metafizzy.co/blog/mythical-drag-drop-multi-column-gri...). I've been trying to fake it on a recent project for Stanford's recent HCI online class (see http://btubbs.github.com/slapdash/ http://btubbs.github.com/slapdash/), but Gridster looks much nicer. Will be switching.

simulate 14y ago

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 14y ago
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 14y ago
  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?
benblodgett 14y ago
I use something similar to allow users to manage the order in which images show up on their listings. (we provide a service for people to buy/sell cranes)

wmblaettler 14y ago

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 14y ago
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!

halis 14y ago

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

aitorciki 14y ago
Sure, it's licensed under MIT :)
deleted 14y ago
[deleted]

wmblaettler 14y ago

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

aitorciki 14y ago
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.

Hikari 14y ago

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