Foros del Web » Programando para Internet » Javascript »

Mover elementos y guardar posiciones en una MySql

Estas en el tema de Mover elementos y guardar posiciones en una MySql en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/05/2016, 01:33
 
Fecha de Ingreso: noviembre-2015
Ubicación: España
Mensajes: 7
Antigüedad: 7 años, 2 meses
Puntos: 0
Mover elementos y guardar posiciones en una MySql

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.
  #2 (permalink)  
Antiguo 31/05/2016, 02:36
 
Fecha de Ingreso: octubre-2012
Mensajes: 135
Antigüedad: 10 años, 4 meses
Puntos: 8
Respuesta: Mover elementos y guardar posiciones en una MySql

Buenos días, para poder hacer eso, yo usaría AJAX. Jquery lo implementa de manera sencilla:
https://www.imaginanet.com/blog/usan...-y-jquery.html
Con esto podrás llamar en cualquier momento a un script PHP y pasarle los valores por post o get de las coordenadas.
Saludos

Etiquetas: arrastrar, coordenadas, javascript+php, mysql, php, posiciones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:17.