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
file: moverows.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 row 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");
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 capturarLinha(o bj) {
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(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
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="sel ecionado"
}
drag = true
capturarLinha(t his);
return false;
}
}
function orderTr(obj) {
obj = obj.parentNode
destino = obj.rowIndex
trs = tabelaDrag.rows ;
if (destino == null) return
if (origem == destino) return
if(tabelaDrag.m oveRow) {
tabelaDrag.move Row(origem,dest ino);
}
if(!tabelaDrag. moveRow && origem < destino) {
var qtd = destino - origem
for (x=0; x<qtd; x++) {
destinotemp = origem
origemtemp = destino
trs[origemtemp].parentNode.ins ertBefore(trs[origemtemp],trs[destinotemp]);
}
}
else if(!tabelaDrag. moveRow && origem > destino) {
trs[origem].parentNode.ins ertBefore(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="hov er"
}
}
}
}
else if (ev == "mouseout") {
if (this.className !="selecionado" ) {
for (x=0; x<qtdTd; x++) {
linhas[linhaDrag].cells[x].className=""
}
}
}
}
[/code]
file: moverows.html
[code=html]
<html>
<body>
<link rel="StyleSheet " href="moverows. css" type="text/css" />
<script type="text/javascript" src="moverows.j s"></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>
[/code]
hope that you people find this useful!
the link to the script to movecolumns is:
see yall!
file: moverows.css
Code:
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}
[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 row 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");
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 capturarLinha(o bj) {
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(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
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="sel ecionado"
}
drag = true
capturarLinha(t his);
return false;
}
}
function orderTr(obj) {
obj = obj.parentNode
destino = obj.rowIndex
trs = tabelaDrag.rows ;
if (destino == null) return
if (origem == destino) return
if(tabelaDrag.m oveRow) {
tabelaDrag.move Row(origem,dest ino);
}
if(!tabelaDrag. moveRow && origem < destino) {
var qtd = destino - origem
for (x=0; x<qtd; x++) {
destinotemp = origem
origemtemp = destino
trs[origemtemp].parentNode.ins ertBefore(trs[origemtemp],trs[destinotemp]);
}
}
else if(!tabelaDrag. moveRow && origem > destino) {
trs[origem].parentNode.ins ertBefore(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="hov er"
}
}
}
}
else if (ev == "mouseout") {
if (this.className !="selecionado" ) {
for (x=0; x<qtdTd; x++) {
linhas[linhaDrag].cells[x].className=""
}
}
}
}
[/code]
file: moverows.html
[code=html]
<html>
<body>
<link rel="StyleSheet " href="moverows. css" type="text/css" />
<script type="text/javascript" src="moverows.j s"></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>
[/code]
hope that you people find this useful!
the link to the script to movecolumns is:
see yall!