1 2 var lista = null;3 var lista_array = ([]);4 5 window.addEventListener('load', function(event) {6 7 lista = document.getElementById('lista');8 9 fillList2();10 11 order(methodA);12 13 }, true);14 15 function order(method, r=false) {16 lista_array.sort(method);17 if (r) lista_array.reverse();18 var i;19 for (i in lista_array) {20 lista_array[i].style.top = (30*i)+'px';21 }22 }23 24 function methodA(a,b) {25 if (a.dataset['a'] < b.dataset['a']) {26 return -1;27 } else if (a.dataset['a'] > b.dataset['a']) {28 return 1;29 }30 return 0;31 }32 33 function methodB(a,b) {34 if (a.dataset['b'] < b.dataset['b']) {35 return -1;36 } else if (a.dataset['b'] > b.dataset['b']) {37 return 1;38 }39 return 0;40 }41 42 43 function methodAlfa(a,b) {44 if (a.innerHTML < b.innerHTML) {45 return -1;46 } else if (a.innerHTML > b.innerHTML) {47 return 1;48 }49 return 0;50 }51 52 function fillList2() {53 var div;54 55 var i;56 for (i=0; i<12; i++) {57 var a = Math.ceil(Math.random()*100)58 var b = Math.ceil(Math.random()*100)59 div = document.createElement('div');60 div.dataset['a'] = a;61 div.dataset['b'] = b;62 div.innerHTML = 'Item '+a+' '+b;63 lista.appendChild(div);64 lista_array.push(div);65 }66 67 68 }69 70 function fillList() {71 var div;72 73 div = document.createElement('div');74 div.dataset['a'] = '1';75 div.dataset['b'] = '10';76 div.innerHTML = 'Mesa';77 lista.appendChild(div);78 lista_array.push(div);79 80 div = document.createElement('div');81 div.dataset['a'] = '2';82 div.dataset['b'] = '87';83 div.innerHTML = 'Teléfono';84 lista.appendChild(div);85 lista_array.push(div);86 87 div = document.createElement('div');88 div.dataset['a'] = '3';89 div.dataset['b'] = '83';90 div.innerHTML = 'Radio';91 lista.appendChild(div);92 lista_array.push(div);93 94 div = document.createElement('div');95 div.dataset['a'] = '4';96 div.dataset['b'] = '73';97 div.innerHTML = 'Teclado';98 lista.appendChild(div);99 lista_array.push(div);100 101 div = document.createElement('div');102 div.dataset['a'] = '5';103 div.dataset['b'] = '9';104 div.innerHTML = 'Ratón';105 lista.appendChild(div);106 lista_array.push(div);107 108 div = document.createElement('div');109 div.dataset['a'] = '6';110 div.dataset['b'] = '39';111 div.innerHTML = 'Monitor';112 lista.appendChild(div);113 lista_array.push(div);114 115 div = document.createElement('div');116 div.dataset['a'] = '3';117 div.dataset['b'] = '19';118 div.innerHTML = 'Cajón';119 lista.appendChild(div);120 lista_array.push(div);121 }Este ShareCode tiene versiones:
- Ordenar lista con animación Probando co... (09/10/2012)
- Ordenar lista con animación Probando co... (09/10/2012)
- Ordenar lista con animación Probando co... (09/10/2012)
Enlace
El enlace para compartir es: