Dar split em id

[F. Duarte]

Olá, estou tentando desenvolver um sistema de drag'n drop onde as variáveis serão salvas num banco de dados. O problema é que eu não saco muito de JS e estou precisando de uma força. O esquema para arrastar eu já tenho, mas a parte de salvar é que tá pegando, porque eu tenho módulos dinâmicos (então não posso determinar a id dos elementos na mão). Cada módulo possui uma id e duas informações que o inserem na página: posição (o container em que ele vai entrar) e ordem (o número 1 fica no topo, o 2 abaixo etc). Exemplo:

id="1", posição="centro", ordem="2"

id="2", posição="centro", ordem="1"

id="3", posição="esquerda", ordem="1"

id="4", posição="direita", ordem="1"

id="5", posição="esquerda", ordem="2"

...

A idéia que eu tive foi a seguinte: colocar a tag id das divs (alvos do drag n drop) com os 3 valores concatenados, assim: id="id_pos_ord" (o módulo na posição 2, por exemplo sairia numa div com id="2_centro_1") e alterá-las de acordo com as mudanças de posições/ordens. Depois, baseado na id (que não foi alterada), salvar a nova posição e a nova ordem.

O problema é que eu não sei como separar a id das divs. Para utilizar o getElementbyId eu tenho que definir a id, mas serão várias e os nomes sempre mudarão. Posso utilizar o getElementbyClass, mas aí como eu pego a id do elemento selecionado?

Tentei declarar uma variável assim: var x = document.getElementsByClass('itemDrag').this.id.split('_'); mas não deu certo.

Alguém pode me ajudar?!

Editado Abril 16, 2008 por fercosmig
Adicionar tag CODE

[Allan Rodrigo]

dae, beleza ae???

até onde eu sei, o document.getElementsByClass não é nativo do javascript, portanto terá que inserir a função, não sei se você já fez isso...mas se não fez, está aí a dica...

Pode ajudar

Também

flow, abraços

Editado Abril 14, 2008 por Allan Rodrigo

[F. Duarte]

pow, o getElementbyClass já está funcionando. O problema é que eu quero pegar os ids dos elementos com a classe "itemDrag" e dividi-los em 3 variáveis: id, posição e ordem. Tipo:

<div id="3_esquerda_1" class="itemDrag">blabla</div>
<div id="1_esquerda_2" class="itemDrag">blabla</div>
<div id="2_centro_1" class="itemDrag">blabla</div>
<div id="4_direita_1" class="itemDrag">blabla</div>

Aí as variáveis ficariam:

$id=3, 1, 2, 4;
$pos=esquerda,esquerda,centro,direita;
$ordem=1,2,1,1;

Assim, eu poderia atribuir as novas posições e ordens baseado na posição de cada item no vetor. Se o item id="3" mudasse para a div centro na ordem 2, as variáveis mudariam para:

$id=3, 1, 2, 4; (a id permanece igual)
$pos=centro,esquerda,centro,direita;
$ordem=2,2,1,1;

Editado Abril 16, 2008 por fercosmig
Adicionar tag CODE

[Allan Rodrigo]

usando assim como você flow, não dá?

var x = document.getElementsByClass('itemDrag').id.split('_');

[KaKarotto]

Cara, há milênios atrás eu fiz algo parecido. Mas eu usei uma pilha para fazer isso.

Se eu não me engano, eu colocava num vetor os elementos:

Pilha=[]

[0]="Ana"

[1]="Beto"

[2]="Rosana"

[3]="Mario"

[4]="Joao"

Onde o 0 seria o primeiro elemento e assim por diante.

Quando eu trocava de posição, o js rearranjava a pilha:

Pilha=[]

[0]="Beto"

[1]="Ana"

[2]="Joao"

[3]="Mario"

[4]="Rosana"

Mandando pro banco de dados a pilha com as novas posições:

onmouseup=mandaPosicoes(Pilha)

Onde "Pilha" usada como argumento, seria uma transformação do Js para uma string com valores separados por "&" e a função mandaPosicoes mandaria a string por query:

http://meusite.com.br?q=Beto&Ana&J...ario&Rosana

Mas faz muito tempo que eu fiz...não lembro exatamente detalhes das operações....

[F. Duarte]

Desculpe, mas eu devo estar muito errado no que estou fazendo... Estou tentando imprimir a variável idOrdem e não consigo de jeito nenhum.

Esta é a minha função dentro do onChange:

var IdOrdem = newArray();

idOrdem=document.getElementsByClass('itemDrag').id.split('_');

alert ( IdOrdem );

$('#assinados_pos').val(IdOrdem.hash);

$('#assinados_ord').val(IdOrdem.hash);

[Allan Rodrigo]

Posta todo o seu codigo ae com css e tudo....

fica mais fácil pra testar...

P.S.:utilize as tags

[F. Duarte]

Vou falar logo o que é pra ver se facilita: Eu quero adaptar o drag n drop pro Joomla. Fazer as divs arrastáveis é fácil, gravar num cookie também. Mas eu preciso mandar pro BD.

Pra cada módulo, o BD tem as seguintes células: id (que é um número, não é o atributo id das divs), position, order.

Meu código com o sistema de drag tá gigantesco, então vou colocar só alguns trechos:

- CSS:

div#coluna3 {
    width: 40%;
    float: left;
    margin: 10px;
}
div.recebeDrag {
    min-height: 50px;
}
div.itemDrag {
    margin: 7px;
    border: 1px solid #ccc;
    padding: 7px;
}
ul {
    list-style: none;
}
.dragAjuda {
    border: 3px dashed #0066CC;
    width: auto !important;
}
.dragAtivo {
    background-color: #f7f7f7;
}
.dragHover {
    background-color: #F0F1FF;
}

- COLUNA 3:

<div id="coluna3" class="recebeDrag">
                   <div id="35_right_1" class="itemDrag"><table cellpadding="0" cellspacing="0" class="moduletable">
                    <tr>

                <th valign="top">
                    Edição do mês                </th>
            </tr>
                    <tr>
            <td>
                <div><a href="http://oleopoldina.com.br/index.php?option=com_content&task=blogsection&id=0&Itemid=9"><img width="165" height="291" style="border: 1px solid rgb(0, 0, 0);" alt="" src="/images/image/capa.jpg" /></a></div>            </td>
        </tr>
        </table></div>

                <div id="6_right_2" class="itemDrag"><table cellpadding="0" cellspacing="0" class="moduletable-amarelo">
                    <tr>
                <th valign="top">
                    Últimas Notícias                </th>
            </tr>
                    <tr>
            <td>
                    <a href="http://oleopoldina.com.br/index.php?option=com_content&task=view&id=29&Itemid=27" class="latestnews-amarelo">

            • Assista</a><br />
        <a href="http://oleopoldina.com.br/index.php?option=com_content&task=view&id=19&Itemid=27" class="latestnews-amarelo">
            • Fábrica da Coca-Cola agora produz mosquitos</a><br />
        <a href="http://oleopoldina.com.br/index.php?option=com_content&task=view&id=3&Itemid=27" class="latestnews-amarelo">
            • Regina só</a><br />
        <a href="http://oleopoldina.com.br/index.php?option=com_content&task=view&id=28&Itemid=27" class="latestnews-amarelo">

            • Abrigo Cristo Redentor não será mais fechado</a><br />
        <a href="http://oleopoldina.com.br/index.php?option=com_content&task=view&id=26&Itemid=30" class="latestnews-amarelo">
            • Vale-Tudo Amador</a><br />
                </td>
        </tr>
        </table></div>
                </div>

        </div>

- java script:

<script type="text/javascript">
$(document).ready(
    function () {
        $('div.recebeDrag').Sortable(
            {
                accept            : 'itemDrag',
                helperclass        : 'dragAjuda',
                activeclass     : 'dragAtivo',
                hoverclass         : 'dragHover',
                handle            : 'h2',
                opacity            : 0.7,
                onChange         : function()
                {                     
                    var IdOrdem = newArray();
                                        idOrdem=document.getElementsByClass('itemDrag').id.split('_');
                },
                onStart : function()
                {
                    $.iAutoscroller.start(this, document.getElementsByTagName('body'));
                },
                onStop : function()
                {
                    $.iAutoscroller.stop();
                }
            }
        );
    }
);
</script>

Novamente: preciso dividir a variável IdOrdem (que corresponde ao atributo ID das divs) em três outras variáveis: $id, $posicao, $ordem.

Editado Abril 25, 2008 por F. Duarte

[Allan Rodrigo]

ok...está usando jquery aí né?

posta o plugin que estás a usar também...

[F. Duarte]

Isso, é JQuery sim. Eu estou utilizando o método desse site: http://www.daviferreira.com/blog/2007/08/1...com-jquery.html

Não sei exatamente o que dizer quanto aos plugins, mas acredito que sejam os arquivos: jquery.js e interface.js