Using Metro UI (CSS) How can I rearrange the tiles/panels as done in windows Azure webpage?

1k Views Asked by At

I recently saw a demo of the Windows Azure webpage, and saw a really neat feature... In the admin portal, you can take a tile or any content really, and rearrange them on their webpage.

When you took a tile / panel with content and dragged it, a visual grid comes up in the background and show you how you can place the content within this grid. (the grid of course you can define where it can be shown)

What component are they using to be able to do this rearrange possible?

I was planning on using the Metro UI CSS from http://metroui.org.ua/ and I would really like to be able to use a simple way of beeing able to define places (divs?) where I can rearrange theese panels of content within... and makeing the user able to design his own startpage.

What framework should I be looking at for this?

(I saw there is http://droptiles.com/ who almost does what I want, but I really want a simple framework, like the Metro UI CSS for beeing able to implement the features easy, and I liked the Metro UI CSS components for my project)

I would like to be able to drag and rearrange any content really... The grid showing up is not a requirement, however I would at least be able to highlight a "frame" or div where the user can put his content... But the grid would really help!

1

There are 1 best solutions below

0
On

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. http://gridster.net/