Este artículo toma y modifica partes de las rutinas javascript usadas por Mike Hall en www.brainjar.com, fundamentalmente del artículo Generic Drag del que se puede leer su traducción al español AQUI realizada por kusor.net. El script propone dos maneras de informarnos de la posición del ratón: una capturando el movimiento del ratón; otra capturando el click del ratón. Debe funcionar correctamente en IE 5.5+, la familia Mozilla y en Opera.
Este es el código del div posición.
<div id="posicion" style="visibility : hidden;text-align:center;position:absolute;font-size:12px; left:300px; top:340px; border:1px solid black;width:160px; height:35px;background-color : #DCDCDC;z-index:100"></div>
El código del script:
<script type="text/javascript">
function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}
var browser = new Browser();
function initMovimiento(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
}
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
document.getElementById("posicion").innerHTML = "Coordenada x: " + x + "<br>Coordenada y: " + y;
}
function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
</script>
Este es el código del formulario.
<form> <p align="center">
<input type="button" value="Movimiento" onclick="initMovimiento(event)"/>
<input type="button" value=" Click " onclick="initPulsar(event)"/>
</p><p align="center">
<input type="button" value="Cancelar" onclick="cancelar()" />
</form>
