Table - Lines/Rows drag & drop

Romulo NF · 08:42 PM

I´ve recently posted a script to move columns from a table using drag and drop javascript. Recently i´ve received a message of a user of this communty showing interest in the script to move lines instead of columns. This post will present the script for you guys.

file: moverows.css

Expand|Select|Wrap|Line Numbers

 
table {border-collapse:collapse; cursor:pointer}

td {width:30px; padding:5px; text-align:center; font:bold 14px verdana; color:#000; border:1px solid #000}

input {width:30px}
 
/* classe das cores utilizadas na movimentação */

.hover {background:lightblue}

.selecionado {background:lightgreen}

file: moverows.js

Expand|Select|Wrap|Line Numbers

 
//----------------------------------------------//

//    Created by: Romulo do Nascimento Ferreira    //

//    Email: romulo.nf@gmail.com                    //

//----------------------------------------------//
 
// NOTICE: This code may be use dto any purpose without further

// permission from the author. You may remove this notice from the

// final code, however its appreciated if you keep the author name/email.

// Email me if theres something needing improvement
 
//set the id of the table that is gonna have the 

//moving row function in the tabelaDrag variable
 
document.onmouseup = soltar;

var drag = false;
 
window.onload = init
 
function init() {

tabelaDrag = document.getElementById("tabela");

linhas = tabelaDrag.getElementsByTagName("TR");

celulas = tabelaDrag.getElementsByTagName("TD");
 
  tabelaDrag.onselectstart = function () { return false; } 

  tabelaDrag.onmousedown = function () { return false; }
 
      for (x=0; x<celulas.length;x++) {

        arrastar(celulas[x])

        celulas[x].onmouseover = pintar

        celulas[x].onmouseout = pintar

    }

}
 
function capturarLinha(obj) {

origem = obj.parentNode.rowIndex

return origem

}
 
function orderTd (obj) {

destino = obj.cellIndex
 
if (destino == null) return

if (coluna == destino) return
 
    for (x=0; x<linhas.length; x++) {

    tds = linhas[x].cells

    var celula = linhas[x].removeChild(tds[coluna])

        if (destino >= ordenacaoMaxima || destino + 1 >= ordenacaoMaxima) {

        linhas[x].appendChild(celula)

        }

        else {

        linhas[x].insertBefore(celula, tds[destino])

        }

    }

}
 
function soltar(e){

    if (!e) e=window.event

    if (e.target) targ = e.target

    else if (e.srcElement) targ=e.srcElement
 
    orderTr(targ)

    drag = false
 
    for(x=0; x<linhas.length; x++) {

        for (y=0; y<linhas[x].cells.length; y++) {

        linhas[x].cells[y].className="";

        }

    }

}
 
function arrastar(obj){

    if(!obj) return;

    obj.onmousedown = function(ev){

        linhaAtual = this.parentNode.rowIndex

            for (x=0; x<linhas[linhaAtual].cells.length; x++) {

            linhas[linhaAtual].cells[x].className="selecionado"

            }

        drag = true

        capturarLinha(this);

        return false;

    }

}
 
function orderTr(obj) {

obj = obj.parentNode

destino = obj.rowIndex

trs = tabelaDrag.rows;
 
if (destino == null) return

if (origem == destino) return
 
    if(tabelaDrag.moveRow) {

    tabelaDrag.moveRow(origem,destino);

    }
 
    if(!tabelaDrag.moveRow && origem < destino) {

    var qtd = destino - origem

        for (x=0; x<qtd; x++) {

        destinotemp = origem

        origemtemp = destino

        trs[origemtemp].parentNode.insertBefore(trs[origemtemp],trs[destinotemp]);

        }

    }

    else if(!tabelaDrag.moveRow && origem > destino) {

    trs[origem].parentNode.insertBefore(trs[origem],trs[destino]);

    }

}
 
function pintar(e) {

if (!e) e=window.event

ev = e.type
 
linhaDrag = this.parentNode.rowIndex

qtdTd = this.parentNode.cells.length
 
    if (ev == "mouseover") {

        if (drag) {

            if (this.className !="selecionado") {

                for (x=0; x<qtdTd; x++) {

                linhas[linhaDrag].cells[x].className="hover"

                }

            }

        }

    }
 
    else if (ev == "mouseout") {

        if (this.className !="selecionado") {

            for (x=0; x<qtdTd; x++) {

            linhas[linhaDrag].cells[x].className=""

            }        

        }

    }

}

file: moverows.html

Expand|Select|Wrap|Line Numbers

 
<html>

<body>
 
<link rel="StyleSheet" href="moverows.css" type="text/css" />
 
<script type="text/javascript" src="moverows.js"></script>
 
<table id="tabela">

    <tr>

        <td>A1</td>

        <td>A2</td>

        <td>A3</td>

        <td>A4</td>

        <td>A5</td>                

    </tr>

    <tr>

        <td>B1</td>

        <td>B2</td>

        <td>B3</td>

        <td>B4</td>

        <td>B5</td>                

    </tr>

    <tr>

        <td>C1</td>

        <td>C2</td>

        <td>C3</td>

        <td>C4</td>

        <td>C5</td>                

    </tr>

    <tr>

        <td>D1</td>

        <td>D2</td>

        <td>D3</td>

        <td>D4</td>

        <td>D5</td>                

    </tr>

    <tr>

        <td>E1</td>

        <td>E2</td>

        <td>E3</td>

        <td>E4</td>

        <td>E5</td>                

    </tr>
 
</table>
 
</body>

</html>

hope that you people find this useful!
the link to the script to movecolumns is:
http://www.thescripts.com/forum/show...37#post2176637

see yall!

Table - Lines/Rows drag & drop

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about