<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mousedown - mouseup - mousemove</title>
<style type="text/css">
body {
margin: 0;
position: relative;
padding: 0;
width: 100%;
height: 700px;
}
#caja {
width:200px;
height:99px;
border:1px solid;
position:absolute;
top: 0;
left: 0;
}
#franja {
display: block;
width: 100%;
height:20px;
background-color:black;
color: white;
cursor: move;
}
</style>
<script type="text/javascript">
function Evento(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, fnc);
}
}
function EventoEliminar(elemento, nomevento, fnc) {
if (elemento.removeEventListener) {
elemento.removeEventListener(nomevento, fnc, false);
} else if (elemento.detachEvent) {
elemento.detachEvent('on' + nomevento, fnc);
}
}
function cssComputado(obj, styleProp) {
if (obj == null) { return 0; }
if (window.getComputedStyle) {
var valor = window.getComputedStyle(obj, null)[styleProp];
} else if (obj.currentStyle) {
var valor = obj.currentStyle[styleProp];
}
return valor;
}
Evento(window, 'load', eventos);
function eventos() {
var box = document.getElementById('caja');
var strip = document.getElementById('franja');
var offset1 = {}, offset2 = {};
var foo;
Evento(strip, 'mousedown', function(evt) {
offset1 = {x : (evt.pageX) ? evt.pageX : window.event.clientX, y : (evt.pageY) ? evt.pageY : window.event.clientY};
Evento(document.body, 'mousemove', foo = function(evt) {
offset2 = {x : (evt.pageX) ? evt.pageX : window.event.clientX, y : (evt.pageY) ? evt.pageY : window.event.clientY};
if (offset2.x != offset1.x || offset2.y != offset1.y) {
box.style.left = (parseInt(cssComputado(box, 'left')) + (offset2.x - offset1.x)) + 'px';
box.style.top = (parseInt(cssComputado(box, 'top')) + (offset2.y - offset1.y)) + 'px';
offset1.x = offset2.x;
offset1.y = offset2.y;
}
});
});
Evento(strip, 'mouseup', function() {
EventoEliminar(document.body, 'mousemove', foo);
});
}
</script>
</head>
<body>
<div id="caja">
<span id="franja">Mueve desde aquí</span>
</div>
</body>
</html>