I´ve seen some people around the web wondering about a code to reorder table columns using the mouse (drag and drop). Since i had already made one script to reorder table lines (TR´s) i decided to start working in one to reorder the columns. Im sharing this code with you all now. If anyone find any issue needing improvements just email-me and i will try to fix. The implementation is very easy, only change the ID of the table in the tabelaDrag variable and it should work.
ps:english is not my primary language so... :)
file: movecolumns.css
file:movecolumn s.js
[code=javascript]
//----------------------------------------------//
// 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.onmous eup = soltar;
var drag = false;
window.onload = init
function init() {
tabelaDrag = document.getEle mentById("tabel a");
linhas = tabelaDrag.getE lementsByTagNam e("TR");
celulas = tabelaDrag.getE lementsByTagNam e("TD");
linhaUm = tabelaDrag.rows[0]
ordenacaoMaxima = linhaUm.cells.l ength
tabelaDrag.onse lectstart = function () { return false; }
tabelaDrag.onmo usedown = function () { return false; }
for (x=0; x<celulas.lengt h;x++) {
arrastar(celula s[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(td s[coluna])
if (destino >= ordenacaoMaxima || destino + 1 >= ordenacaoMaxima ) {
linhas[x].appendChild(ce lula)
}
else {
linhas[x].insertBefore(c elula, tds[destino])
}
}
}
function soltar(e){
if (!e) e=window.event
if (e.target) targ = e.target
else if (e.srcElement) targ=e.srcEleme nt
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="sel ecionado"
}
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="hov er"
}
}
}
}
else if (ev == "mouseout") {
for (x=0; x<linhas.length ; x++) {
if (this.className !="selecionado" ) {
linhas[x].cells[this.cellIndex].className=""
}
}
}
}
[/code]
file:movecolumn s.html
[code=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="movecolum n.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>
[/code]
ps:english is not my primary language so... :)
file: movecolumns.css
Code:
/* 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}
[code=javascript]
//----------------------------------------------//
// 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.onmous eup = soltar;
var drag = false;
window.onload = init
function init() {
tabelaDrag = document.getEle mentById("tabel a");
linhas = tabelaDrag.getE lementsByTagNam e("TR");
celulas = tabelaDrag.getE lementsByTagNam e("TD");
linhaUm = tabelaDrag.rows[0]
ordenacaoMaxima = linhaUm.cells.l ength
tabelaDrag.onse lectstart = function () { return false; }
tabelaDrag.onmo usedown = function () { return false; }
for (x=0; x<celulas.lengt h;x++) {
arrastar(celula s[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(td s[coluna])
if (destino >= ordenacaoMaxima || destino + 1 >= ordenacaoMaxima ) {
linhas[x].appendChild(ce lula)
}
else {
linhas[x].insertBefore(c elula, tds[destino])
}
}
}
function soltar(e){
if (!e) e=window.event
if (e.target) targ = e.target
else if (e.srcElement) targ=e.srcEleme nt
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="sel ecionado"
}
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="hov er"
}
}
}
}
else if (ev == "mouseout") {
for (x=0; x<linhas.length ; x++) {
if (this.className !="selecionado" ) {
linhas[x].cells[this.cellIndex].className=""
}
}
}
}
[/code]
file:movecolumn s.html
[code=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="movecolum n.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>
[/code]
Comment