54
file: moverows.css
Expand|Select|Wrap|Line Numbers
- 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}
Expand|Select|Wrap|Line Numbers
- //----------------------------------------------//
- // 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=""
- }
- }
- }
- }
Expand|Select|Wrap|Line Numbers
- <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>
the link to the script to movecolumns is:
http://www.thescripts.com/forum/show...37#post2176637
see yall!
