表-列拖放

最新推荐文章于 2025-12-03 11:16:56 发布

翻译最新推荐文章于 2025-12-03 11:16:56 发布 · 91 阅读

文章标签：

我曾经在网上看到一些人想知道使用鼠标（拖放）对表列进行重新排序的代码。由于我已经制作了一个脚本来对表行（TR）进行重新排序，因此我决定开始使用一个脚本来对列进行重新排序。我现在与大家共享此代码。如果有人发现任何需要改进的问题，请给我发电子邮件，我会尽力解决。实现非常简单，只需更改tabelaDrag变量中表的ID，它就可以工作。

ps：英语不是我的主要语言，所以... :)

文件：movecolumns.css


/* estilo geral da tabela */
table {border-collapse:collapse}
table td {border:1px solid #000; padding:2px 5px; text-align:center; cursor:pointer} 
/* classe das cores utilizadas na movimentação */
.hover {background:lightblue}
.selecionado {background:lightgreen}

档案：movecolumns.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 column 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");
linhaUm = tabelaDrag.rows[0]
ordenacaoMaxima = linhaUm.cells.length 
  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 capturarColuna(obj) {
coluna = obj.cellIndex
return coluna
} 
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
    orderTd(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){
        colunaAtual = this.cellIndex
            for (x=0; x<linhas.length; x++) {
            linhas[x].cells[this.cellIndex].className="selecionado"
            }
        drag = true
        capturarColuna(this);
        return false;
    }
} 
function pintar(e) {
if (!e) e=window.event
ev = e.type 
    if (ev == "mouseover") {
        if (drag) {
            for (x=0; x<linhas.length; x++) {
                if (this.className !="selecionado") {
                linhas[x].cells[this.cellIndex].className="hover"
                }
            }
        }
    } 
    else if (ev == "mouseout") {
        for (x=0; x<linhas.length; x++) {
            if (this.className !="selecionado") {
            linhas[x].cells[this.cellIndex].className=""
            }
        }
    }
}

文件：movecolumns.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
<head>
    <title>Drag and Drop Columns</title> 
<script type="text/javascript" src="movecolumn.js"></script> 
<link rel="StyleSheet" href="movecolumn.css" type="text/css" /> 
</head> 
<body> 
<table id="tabela">
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td>Coluna 4</td>
        <td>Coluna 5</td>
        <td>Coluna 6</td>
        <td>Coluna 7</td>
        <td>Coluna 8</td>
        <td>Coluna 9</td>
        <td>Coluna 10</td>
    </tr>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
        <td>A5</td>
        <td>A6</td>
        <td>A7</td>
        <td>A8</td>
        <td>A9</td>
        <td>A10</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
        <td>B5</td>
        <td>B6</td>
        <td>B7</td>
        <td>B8</td>
        <td>B9</td>
        <td>B10</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
        <td>C4</td>
        <td>C5</td>
        <td>C6</td>
        <td>C7</td>
        <td>C8</td>
        <td>C9</td>
        <td>C10</td>
    </tr> 
</table> 
</body> 
</html>