Gravar (pegar) posição de Div com efeito Drag and Drop

[possamai]

Boa Tarde pessoal!

Sou novo aqui no grupo, mais já tenho alguma experiência Com PHP e
Jquery. Espero poder ajudar aos que precisarem, assim como receber
ajuda de quem souber. ;)

Como primeira postagem, estou com dúvida em um projeto particular que
estou desenvolvendo.

Estou criando um sistema de gerenciamento, onde através de <div></
div>'s, drag'n drop, poderei posicionar as informações em qualquer
área da tela.
Encontrei alguns plugins pra isso, como:
http://ppdrag.ppetrov.com/ e
http://dev.iceburg.net/jquery/jqDnR/

Até aí tudo bem. Consigo fazer a criação/exclusão das divs, assim como
movimentá-las pela tela.

Meu problema agora é o seguinte. Preciso pegar a posição de cada div
na tela, para gravar no banco de dados via php. Ex: Div1 -> X: 100, e
Y: 200 / Div2 -> X: 400 e Y: 100 e assim por diante.

Assim em outra tela, eu preciso gerar essas mesmas divs, posicionadas
conforme configurado anterior, porém agora ela estaria fixa.

Não sei se ficou meio confuso minha explicação, mais a idéia é em uma
tela gerar as divs e posicioná-las (arrastando) e gravar, para que em
outra tela eu tenha essas mesmas Divs posicionadas.

Ps: Pesquisei também sobre Tabelas ou Listas Serializáveis (http://
www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/), porém a
minha intenção não é trabalhar com listas ordenadas fixas (horizontal
ou vertical) - isso eu já tenho desenvolvido, e sim trabalhar com
"toda" a tela.

Agradeço a atenção,
Anderson Possamai

[Julio Protzek]

Imagino que algo assim deve resolver (ou ajudar):

$(function(){

var posicoesDasDivs= [];

$('div.posicionavel').each(function(i, el){

div= $(el);

posicoesDasDivs[i]= {

'id': $(div).id,

'y': $(div).css('top'),

'x': $(div).css('left')

};

});

$.post('guardar-posicoes-no-banco.php', posicoesDasDivs, sucesso);

});

--
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/jquery-br?hl=pt-BR.

[possamai]

Bom dia Julio.

Obrigado pela dica.. não tinha pensado pegar os valor do css (top,
left)..
Fiz uns testes no projeto modificando um pouco seu código, mais
funcionou certinho.. tanto na movimentaçao, como depois na hora de
gerar a div já posicionada.

Agradeço a ajuda. ;)
Anderson Possamai

On 10 fev, 22:32, Julio Protzek <julioprot...@gmail.com> wrote:
> Imagino que algo assim deve resolver (ou ajudar):
>
> $(function(){
> var posicoesDasDivs= [];
>  $('div.posicionavel').each(function(i, el){
> div= $(el);
> posicoesDasDivs[i]= {
>  'id': $(div).id,
> 'y': $(div).css('top'),
> 'x': $(div).css('left')
>  };});
>
>  $.post('guardar-posicoes-no-banco.php', posicoesDasDivs, sucesso);
>
> });
>

> > jquery-br+...@googlegroups.com<jquery-br%2Bunsu...@googlegroups.com>

[Leo Balter]

Não sei se será a melhor solução, mas procure pelo plugin Draggable do jQuery.

Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.

Para obter mais opções, visite esse grupo em http://groups.google.com/group/jquery-br?hl=pt-BR.

--
At,
Leo Balter
http://blog.leobalter.net