Hacer drag and drop con jQuery

Una de las primeras cosas que aprendí a hacer cuando me inicié con jQuery fue hacer un ejercicio de drag and drop.

Os dejo los pasos que necesitamos para que funcione:

1. Incluir las librerías js de jQuery

?

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

2. Crear los divs que vamos a cambiar de posición

?

<div id="sortable" class="ui-sortable">  <div class="drag ui-sortable-handle">Item 1</div>  <div class="drag ui-sortable-handle">Item 2</div>  <div class="drag ui-sortable-handle">Item 3</div>  <div class="drag ui-sortable-handle">Item 4</div>  <div class="drag ui-sortable-handle">Item 5</div> </div>

3. Poner el código para que los divs puedan ejecutar el movimiento

?

<script>  $(function() {   $("#sortable").sortable({ // id del elemento padre sobre el que hacer drag and drop    revert: true, // activar pequeña animación al soltar    opacity: 0.5 // mostrar una sombra del elemento que estamos arrastrando   });  }); </script>

4. Añadir CSS para que los divs tengan mejor aspecto

?

<style>  .drag {   width: 300px;   cursor: move;   padding: 5px;   border: 1px #CCC solid;   margin: 5px;   border-radius: 5px;   background-color: #CCC;  } </style>

Como obtener nuestra posición con HTML5, Javascript y jQuery sin usar GPS

Hoy en día una de las cosas que más nos pueden llamar la atención al utilizar un smartphone o un tablet es que muchas de las aplicaciones que ejecutamos nos piden permiso para localizar tu posición. Para esto no hace falta tener un receptor GPS en el dispositivo sino que la combinación de varias tecnologías como WIFI y GSM pueden llegar a dar una posición bastante exacta.

Con las redes WIFI lo que se hace para obtener nuestra posición es triangular las direcciones MAC de dichas redes. Para ello existen bases de datos que guardan las posiciones de las redes y sus "matrículas". Existen varias empresas que se dedican a ir anotando esta información, entre ellas por supuesto Google con su Google Street View.

La tecnología GSM utiliza las antenas de telefonía para también triangular nuestra posición.

Todo esto llevado a la práctica es una tarea muy sencilla que se puede realizar mediante Javascript sobre navegadores que soporten HTML5 y siempre y cuando permitamos al navegador que detecte nuestra posición. A continuación os dejo un pequeño trozo de código para que veáis qué se puede hacer. Simplemente muestro el resultado en formato imagen de Google Maps, pero lo podríamos complicar mucho más utilizando la API de Google.

?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script language="javascript">  function getPosition() {   if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(showMap, showError);   } else {    alert('El navegador no soporta la API de geolocalización');   }  }    function showMap(position) {   var latitude = position.coords.latitude;   var longitude = position.coords.longitude;   var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + latitude + "," +       longitude + "&zoom=14&size=500x500&markers=color:blue|label:P|" +       latitude + ',' + longitude;   $(document.body).append(    $(document.createElement("img")).attr("src", image_url).attr('id','map')   );  }    function showError(err) {   if (err.code == 0) {    alert("Error desconocido");   }   if (err.code == 1) {    alert("El usuario no ha compartido su posición");   }   if (err.code == 2) {    alert("No se puede obtener la posición actual");   }   if (err.code == 3) {    alert("timeout recibiendo la posicion");   }  } </script> <a href="javascript:getPosition();">Mostrar Posición</a>