Se você precisa criar uma página com widgets, onde o usuário pode arrastar e soltar retrancas que estão separadas em colunas, veja essa solução:
http://blog.xilinus.com/2007/8/26/prototype-portal-class
Enquanto a Prototype UI não sai (isso é, se sair algum dia de verdade), o autor dessa classe utilizou a prototype junto com o script.aculo.us (framework para efeitos, feito em cima da prototype) para resolver o problema dele. Aqui você pode ver funcionando:
http://blog.xilinus.com/prototype-portal/test/index.html
O código é muito simples:
- crie a marcação html com quantas colunas quiser:
<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div> - crie um CSS para exibir de forma adequada as colunas e os widgets:
#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}
- instancie um objeto da Portal da classe Xilinus, passando a div que contém as colunas como parâmetro:
var portal = new Xilinus.Portal("#page div") - adicione widgets ao portal escolhendo a coluna em que aparecerá e definindo se quer ou não inserir título, conteúdo, etc…:
portal.add(new Xilinus.Widget(), 0)
// Or with title and content
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);
Altamente recomendavelessa classe; eu fiz uma implementação desse tipo 2 anos atrás, faz as mesmas coisas, e sei qual a dificuldade. E fiz ela muito amarrada ao sistema para o qual criei. Essa indicada é totalmente independente, orientada a objetos. Fácil! E com muitas opções de configuração, livre em termos de layout e com chamada a funções de callback caso você precise efetuar rotinas após mover widgets. Muito bom!