Buenas tardes a todos,
Os escribo ya que tengo una duda acerca de como implementar una cosa.
En primer lugar, tengo el siguiente código, principalmente muevo dos elementos por la pantalla:
__________________________________________________ _________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function carga()
{
posicion=0;
// IE
if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
// Otros
else navegador=1;
}
function evitaEventos(event)
{
// Funcion que evita que se ejecuten eventos adicionales
if(navegador==0)
{
window.event.cancelBubble=true;
window.event.returnValue=false;
}
if(navegador==1) event.preventDefault();
}
function comienzoMovimiento(event, id)
{
elMovimiento=document.getElementById(id);
// Obtengo la posicion del cursor
if(navegador==0)
{
cursorComienzoX=window.event.clientX+document.docu mentElement.scrollLeft+document.body.scrollLeft;
cursorComienzoY=window.event.clientY+document.docu mentElement.scrollTop+document.body.scrollTop;
document.attachEvent("onmousemove", enMovimiento);
document.attachEvent("onmouseup", finMovimiento);
}
if(navegador==1)
{
cursorComienzoX=event.clientX+window.scrollX;
cursorComienzoY=event.clientY+window.scrollY;
document.addEventListener("mousemove", enMovimiento, true);
document.addEventListener("mouseup", finMovimiento, true);
}
elComienzoX=parseInt(elMovimiento.style.left);
elComienzoY=parseInt(elMovimiento.style.top);
// Actualizo el posicion del elemento
elMovimiento.style.zIndex=++posicion;
evitaEventos(event);
}
function enMovimiento(event)
{
var xActual, yActual;
if(navegador==0)
{
xActual=window.event.clientX+document.documentElem ent.scrollLeft+document.body.scrollLeft;
yActual=window.event.clientY+document.documentElem ent.scrollTop+document.body.scrollTop;
}
if(navegador==1)
{
xActual=event.clientX+window.scrollX;
yActual=event.clientY+window.scrollY;
}
elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";
elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";
evitaEventos(event);
}
function finMovimiento(event)
{
if(navegador==0)
{
document.detachEvent("onmousemove", enMovimiento);
document.detachEvent("onmouseup", finMovimiento);
}
if(navegador==1)
{
document.removeEventListener("mousemove", enMovimiento, true);
document.removeEventListener("mouseup", finMovimiento, true);
}
}
window.onload=carga;
</script>
</head>
<body>
<div id="div1" style="top:100px; left:100px; position:absolute; background-color:#FF0000; color:#000000;"
onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">
<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
</span>
</div>
<div id="div2" style="top:200px; left:300px; position:absolute; background-color:#FFFF00; color:#000000;"
onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">
<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
</span>
</div>
</body>
</html>
__________________________________________________ ________________________
Pues bien, necesito saber como implementar que al mover un elemento, por ejemplo "cuadro amarillo", al soltar clic me guarde en una tabla de una mysql la posicion "x" e "y" de "cuadroAmarillo".
Muchas gracias de antemano.
Un saludo y fuerte abrazo a todos.
