表格行拖放-优快云博客

我最近发布了一个脚本，该脚本使用拖放JavaScript从表中移动列。最近，我收到了该社区的用户的一条消息，该消息表明对脚本的兴趣是移动行而不是列。这篇文章将为大家介绍脚本。

文件：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}

文件：moverows.js


//----------------------------------------------//
//    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=""
            }        
        }
    }
}

文件：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>