Geolocalización

En el siguiente ejemplo vamos a localizar la posición de un usuario obteniendo los valores de latitud y longitud del mismo, a través de la función getCurrentPosition().

<script> 
var x = document.getElementById("demo"); 
function getLocation() 
	{
	if (navigator.geolocation) 
	{navigator.geolocation.getCurrentPosition(showPosition);}
	else{x.innerHTML = "Geolocation is not supported by this browser.";} 
	}
function showPosition(position) 
	{
	x.innerHTML = "Latitude: " + position.coords.latitude + 
	"Longitude: " + position.coords.longitude; 
	}
</script>
  • Primero se comprueba si la Geolocalización está soportada.
  • Si es así, arranca el proceso, sino se mostrará un mensaje al usuario.
  • Si el proceso getCurrentPosition() es correcto, devolverá un objeto de coordenadas a la función especificada en el parámetro showPosition.
  • La función showPosition() muestra los valores de latitud y longitud.

Presiona el botón para obtener tus coordenadas:



Drag and Drop

  • Lo primero es convertir un elemento en arrastrable, mediante el atributo draggable.
  • Después especificamos lo que ocurrirá cuando el elemento se arrastre. El atributo ondragstart llama a una función drag(event), que especifica que datos serán arrastrados.
  • El evento ondragover específica donde puede ser arrastrado el elemento. Para permitir el arrastre llamaremos al evento event.preventDefault().
  • Cuando soltemos al elemento arrastrado ocurrirá otro evento. En el ejemplo anterior al atributo ondrop llama a la función drop(event).
<div id="dragdrop1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="../img/asuncion.png" draggable="true" 
	ondragstart="drag(event)" id="drag1" width="96" height="96">
</div>
<div id="dragdrop2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
				
<script>
		function allowDrop(ev)
		{
		ev.preventDefault();
		}

		function drag(ev)
		{
		ev.dataTransfer.setData("Text",ev.target.id);
		}

		function drop(ev)
		{
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
		}
</script>