10

I have elements of different sizes that are arranged somewhat acording to a grid (like in the image below) and I want to drag and drop properly those elements. Is there a plugin that would do that? Sortable does not do it properly...

EDIT: By "properly" I mean it should act normal (meaning if I drag and drop the big one on the right it should rearrange inteligently). Maybe I just need to see one that does what I want and I'll make it do stuff "properly"

sortable grid

EDIT: If you move the big block on the right (how it should look like).

sortable grid 2

EDIT: I just want a way to rearrange a grid-like layout like this one. I can accept other ideas..

5
  • 5
    "properly" is not well-defined
    – davin
    Mar 31, 2011 at 13:11
  • Still not clear enough. What is supposed to happen when you "drag and drop the big one on the right"? Give an example of where you are dropping it and how you want the layout to appear. Mar 31, 2011 at 13:24
  • I just edited but the hall idea is that I could somehow rearrange a grid like layout like this :) Mar 31, 2011 at 13:38
  • 2
    I've seen plugins like this, I just wish I could remember where. He's looking for a cross between 960 grid and sortable divs.
    – Incognito
    Mar 31, 2011 at 13:41
  • What you're asking for ain't easy. When you say "rearrange intelligently," that piece of the puzzle is much bigger and more complex once you start trying to actually build it. Read over my thoughts on The mythical drag n’ drop multi-column grid plugin which addresses adding Draggable to Masonry or Isotope
    – desandro
    Mar 31, 2011 at 19:00

5 Answers 5

10

At Ducksboard we just launched gridster.js, a jQuery plugin that makes possible to build draggable layouts from elements spanning multiple columns. A live demo can be seen at gridster.net.

We are using it to arrange widgets of differents sizes in our dashboards. Hope you like!

1
  • Why would viewers of such layout want to drag things around? Is this meant for a light-table application or a game? Or is this meant for a geckoboard alternative to display securities prices, etc.? Curious... Aug 5, 2012 at 14:10
9

Try isotope's re-layout. But be sure to look at their OTHER examples on Isotope as well. Anyway...this should give you a healthy starting point.

0
4

I know you asked for this a while ago, but I finally remembered what it was called...

http://masonry.desandro.com/

Cheers.

3

Take a look at Geckoboard, which (I believe) uses jQuery Sortable to achieve the drag n drop grid layout.

0
1

Here's a simple way to do it using Isotope and jQuery UI.

2
  • 2
    All the boxes are equal in your example Feb 11, 2013 at 10:51
  • so change them :) create a new class (or several) with different dimensions and randomly apply them to some of the lis.
    – Jason
    Feb 11, 2013 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.