Table - Lines/Rows drag & drop

[Romulo NF]

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

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

//----------------------------------------------//
//    Created by: Romulo do Nascimento Ferreira    //
//    Email: [e-mail]                    //
//----------------------------------------------//
 
// 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

<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!