How to create traggable columns with Prototype and Scriptaculous

How can I create draggable columns and place then in any order with scripaculous. It is possible to create draggable rows with http://talkingcode.co.uk/2007/11/14/drag-and-drop-table-rows-with-ajax-scriptaculous-and-prototype/. Please help.

Hey Geshan,

Can you clarify what you mean by “columns” and “rows,” exactly?

Effectively dragging table rows is kind of a nightmare for now, as various browsers have a very different level of support for <tr> layout tricks… The article you refer to doesn’t even work properly on the latest update of FF2, for instance.

As for columns, they’re not represented by an element in HTML, so you can’t make a whole column draggable, as there’s no such element as the column itself. If you need to make columns draggable, it has to look like a column, but actually be something else codewise. Perhaps what you’re looking for is just a series of left-floating <div>’s with inner tables?

Perhaps HTML tables are mandated in your page because of the semantics of the underlying data, but if you don’t mind wrecking the semantics of the page, you can use alternate markup and CSS tricks to make it all draggable. It becomes pretty easy then: just consider what floating elements can do, when dragged!

Also, if you’re more into just creating a portal-like interface, have a look at Sébastien Gruhier’s Prototype Portal attempt.