<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
.ordename {
width: 200px;
height: auto;
list-style-type: none;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
cursor: move;
}
.lista1 {
left: 40%;
top: 100px;
}
.lista2 {
left: 40%;
top: 300px;
}
.ordename > li {
background-color: rgb(107, 100, 100);
height: 40px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
text-align: center;
font: bold 2em Verdana;
}
.ordename > li:hover {
background-color: rgb(167, 62, 62);
}
</style>
<script type="text/javascript">
var ordenable = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, fnc);
}
},
EventoIE8 : function (elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});
}
},
EventoEliminar : function(elemento, nomevento, fnc) {
if (elemento.removeEventListener) {
elemento.removeEventListener(nomevento, fnc, false);
} else if (elemento.detachEvent) {
elemento.detachEvent('on' + nomevento, fnc);
}
},
EventoCancelar : function(evt) {
var evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
},
EventoParar : function(evt) {
var evt = evt || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
},
init : function() {
var e = document.querySelectorAll('.ordename');
for(var i = 0; i < e.length; i++) {
e[i].orden = new ordenable.orden(e[i]);
}
},
active : false,
listado : null,
orden : function(objetivo) {
var foo = null;
var elementos = objetivo.getElementsByTagName('li');
var from = null;
var to = null;
ordenable.Evento(document, 'mouseup', function(evt) {
if (ordenable.active == true) {
ordenable.active = false;
ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);
ordenable.EventoEliminar(ordenable.listado, 'mousemove', foo);
} else {
return;
}
});
for(var x = 0; x < elementos.length; x++) {
elementos[x].setAttribute('factor', x);
ordenable.EventoIE8(elementos[x], 'mousedown', function(evt) {
ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);
from = this;
ordenable.active = true;
from.style.backgroundColor = 'rgb(62, 129, 167)';
ordenable.Evento(this.parentNode, 'mousemove', foo = function(evt) {
ordenable.listado = this;
ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);
to = event.target || window.event.srcElement;
if (ordenable.active == true) {
if (from.attributes.factor.value > to.attributes.factor.value) {
this.insertBefore(from, to);
} else {
this.insertBefore(from, to.nextSibling);
}
for(var i = 0; i < elementos.length; i++) {
elementos[i].setAttribute('factor', i);
}
}
});
});
}
}
}
ordenable.Evento(window, 'load', ordenable.init);
</script>
</head>
<body>
<ul unselectable="on" class="ordename lista1">
<li>opción 1</li>
<li>opción 2</li>
<li>opción 3</li>
<li>opción 4</li>
</ul>
<ul unselectable="on" class="ordename lista2">
<li>opción 1</li>
<li>opción 2</li>
<li>opción 3</li>
<li>opción 4</li>
</ul>
</body>
</html>