Persistencia simple de elementos arrastrables con jQuery

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

En algún momento, es posible que debas crear un elemento que se pueda arrastrar dentro de tu aplicación web. Esta es una gran funcionalidad, sin embargo, es posible que desees o descubras que necesita que el elemento permanezca en su lugar después de ser arrastrado. En este tutorial, te mostraré cómo arrastrar fácilmente un elemento y hacer que se pegue, incluso después de una recarga de página, tomando y almacenando sus coordenadas X e Y.

Escenario

Entonces tienes un elemento en tu aplicación web. Puedes arrastrarlo, ponerlo aquí y ponerlo allí. Pero, cuando la página se recarga de alguna manera, el elemento vuelve a su posición predeterminada. Si bien deseas que el elemento se pueda arrastrar, no deseas que se mueva después de que se haya arrastrado. Veamos una solución simple que nos brinde esta capacidad.

Empezando

Para este tutorial, necesitaremos la biblioteca jQuery, la interfaz de usuario jQuery y el complemento jQuery-JSON de Brantley Harris. También usaremos PHP y una base de datos MySQL para analizar y almacenar nuestros datos. Si eres nuevo en jQuery, no te preocupes. jQuery es una biblioteca de JavaScript altamente extensible, rápida y liviana que es divertida y fácil de usar. La biblioteca tiene documentación muy bien estructurada y una gran comunidad. Este es mi primer tutorial sobre jQuery y JavaScript, así que ten paciencia conmigo. Espero explicar todo lo mejor que pueda y si tienes alguna pregunta, no dudes en preguntar.

El HTML y CSS

Quería comenzar con el HTML y el estilo de este tutorial, ya que el efecto se aplica a los elementos HTML y ayuda a visualizar lo que vamos a hacer desde el principio. Primero el CSS:

html, body {
	background:#151515;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#glassbox {
	background:#333;
	border:1px solid #000;
	height:400px;
	margin:30px auto auto auto;
	position:relative;
	width:960px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}

#element {
	background:#666;
	border:1px #000 solid;
	cursor:move;
	height:143px;
	padding:10px 10px 10px 10px;
	width:202px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#respond{
	color:#fff;
	margin:0 auto 0 auto;
	width:960px;	
}

El CSS es muy simple. Configuramos las propiedades html y del cuerpo para borrar los márgenes y el relleno, y continuamos estableciendo algunas alturas, anchos y otras propiedades para nuestros elementos para que no se vea tan insípido. -moz-border-radius y -webkit-border-radius son dos propiedades que nos permiten crear bordes redondeados (aplicables solo a Mozilla Firefox y Safari 3 en este momento) para nuestros elementos. Echemos un vistazo al HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Draggable Element Persistence with jQuery</title>

<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>

</head>

<body>

	<div id="glassbox">
		<div id="element"><img src="nettuts.jpg" alt="Nettuts+" />Move the Box<p></p></div>
	</div>

	<div id="respond"></div>

Como puedes ver, simplemente configuramos una página muy agradable y simple que llama a nuestro CSS, biblioteca de JavaScript y complementos, y contiene los elementos que usaremos para aplicar algunos efectos y eventos. Como nota, el archivo jquery-ui es una compilación personalizada que solo incluye el núcleo y la funcionalidad de interacción arrastrable.

El Javascript

¡Ahora para una jugosa interacción! Primero echemos un vistazo a algunas de las funciones básicas que usaremos para aplicar algunos efectos a nuestros elementos. Vamos a desglosarlo.

<script type="text/javascript">
	$(document).ready(function() {
		$("#element").draggable({ 
				containment: '#glassbox', 
				scroll: false
		 })

Primero le decimos al navegador: "Oye, este es un código que queremos ejecutar; no es HTML, es JavaScript". Luego queremos esperar a que se cargue el documento antes de hacer cualquier otra cosa, una vez que eso sucedió, llamamos a una función para seleccionar nuestro #element DIV, y agregamos el controlador arrastrable con algunas opciones básicas. Las opciones de contención mantendrán nuestro elemento dentro del DIV padre, y establecemos scroll en false porque no queremos que ocurra ningún desplazamiento. Sigamos adelante:

1	.mousemove(function(){
2	var coord = $(this).position();
3	$("p:last").text( "left: " + coord.left + ", top: " + coord.top );
4	})

Con este dato, llamamos al controlador de eventos mousemove y le decimos: "Cuando el mouse se mueva, establezca la variable 'coord' para que sea igual a la posición de nuestro #element seleccionado". Luego seleccionamos un párrafo ("p: last"), el último en #element, e imprimimos un texto que leerá las propiedades left(x) y top(y) de nuestro elemento en relación con el objeto padre (que es #glassbox).

	.mouseup(function(){ 
				var coords=[];
				var coord = $(this).position();
				var item={ coordTop:  coord.left, coordLeft: coord.top  };
			   	coords.push(item);
				var order = { coords: coords };
				$.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
						if(response=="success")
							$("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
							setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
						});	
				});
						
	});
</script>

¡Ok ahora por un poco de maldad! En este fragmento vamos a hacer un par de cosas. Primero queremos configurar una matriz vacía y luego obtener algunos valores para llenarla. Llamando al controlador de eventos .mouseup() le estamos diciendo al navegador que busque el evento cuando suelte el clic del mouse. Configuramos las variables coords para que sean iguales a nuestra matriz vacía, y nuevamente establecemos la variable coord para que sean iguales al controlador de posición de nuestro #element. Luego necesitamos crear una lista de elementos, estos serán coordTop: y coordLeft: respetuosamente igualando las posiciones izquierda y superior de nuestro #element. Con coords.push(item) literalmente estamos empujando nuestra lista de elementos y llenando la matriz de coords con ella. Luego, establece el orden de las variables como una nueva lista donde la clave de coords será igual a nuestra matriz de coords. Ahora, un poco de AJAX.

$.post es un controlador de solicitudes AJAX que carga una página remota utilizando un método HTTP POST. Esta función busca los parámetros: url, data, callback y data type to be returned. En este tutorial especificamos el archivo updatecoords.php como nuestra URL porque aquí es donde queremos enviar nuestros datos de publicación, luego definimos nuestro tipo de datos incluyendo la función $.toJSON definida en nuestro complemento jquery-JSON y configurando nuestro orden de variables como los datos que serán manejados por .toJSON. A continuación, creamos una devolución de llamada que verifica una respuesta de retorno de nuestro archivo PHP en caso de éxito, y agregamos un poco de sabor diciendo: "Si lo que se devolvió es igual al éxito, entonces ..." Mantenemos este html oculto usando el controlador de efectos .hide y dile que se desvanezca a 1000 milisegundos, espere con un tiempo de espera de 2000 milisegundos y dile que se desvanezca nuevamente. Al final, nuestro JavaScript debería verse así:

<script type="text/javascript">
	$(document).ready(function() {
		$("#element").draggable({ 
				containment: '#glassbox', 
				scroll: false
		 }).mousemove(function(){
				var coord = $(this).position();
				$("p:last").text( "left: " + coord.left + ", top: " + coord.top );
		 }).mouseup(function(){ 
				var coords=[];
				var coord = $(this).position();
				var item={ coordTop:  coord.left, coordLeft: coord.top  };
			   	coords.push(item);
				var order = { coords: coords };
				$.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
						if(response=="success")
							$("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
							setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
						});	
				});
						
		});
</script>

Coloca el JavaScript debajo del HTML, justo después de la etiqueta de cierre body .

El PHP

Muy bien, ahora vamos a hacer algo con los datos que se publican desde nuestro jQuery. Primero creemos una base de datos simple para almacenar nuestras coordenadas, que luego recuperaremos para definir la posición de nuestro elemento. El segundo será nuestro archivo config.php que almacenará la configuración de conexión de nuestra base de datos, y luego terminaremos con updatecords.php.

Database: 'xycoords'

CREATE TABLE IF NOT EXISTS `coords` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `x_pos` int(4) NOT NULL,
  `y_pos` int(4) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

config.php

<?php
/*Database Settings*/

$db_host ="localhost"; //this will likely stay the same
$db_name = "xycoords"; //name of the database we will be using
$db_usr = "database_username"; //db username
$db_pass = "database_password"; //db password

//Connect to the database
$link = mysqli_connect($db_host, $db_usr, $db_pass) or die("MySQL Error: " . mysqli_error());
//Select our database
mysqli_select_db($link, $db_name) or die("MySQL Error: " . mysqli_error());
?>

updatecoords.php

<?php
if(!$_POST["data"]){
	echo "Nothing Sent";
	exit;
}

include ('config.php');

//decode JSON data received from AJAX POST request
$data = json_decode($_POST["data"]);

foreach($data->coords as $item) {
	//Extract X number for panel
	$coord_X = preg_replace('/[^\d\s]/', '', $item->coordTop);
	//Extract Y number for panel
	$coord_Y = preg_replace('/[^\d\s]/', '', $item->coordLeft);
	//escape our values - as good practice
	$x_coord = mysqli_real_escape_string($link, $coord_X);
	$y_coord = mysqli_real_escape_string($link, $coord_Y);
	
	//Setup our Query
	$sql = "UPDATE coords SET x_pos = '$x_coord', y_pos = '$y_coord'";
	
	//Execute our Query
	mysqli_query($link, $sql) or die("Error updating Coords :".mysqli_error());	
}

//Return Success
echo "success";

?>

Esto es bastante facil de seguir. Lo primero que queremos hacer es verificar que los datos de nuestra publicación se pasen al archivo. Si eso sucede, incluimos nuestro archivo de configuración para nuestra conexión de base de datos y establecemos la variable data en json_decode(variable de publicación pasada); json_decode es una función PHP implementada en PHP 5.2.0 que nos permite decodificar una cadena JSON.

Dado que nuestra variable $data contiene una matriz de datos, debemos dividirla para obtener los valores que necesitamos. Para hacer esto, tomamos foreach $data->coords (que es de nuestra variable de orden en nuestro JavaScript) como un elemento. Esto toma cada par de clave y valor y crea un objeto de elemento a partir de la matriz, luego especificamos y creamos una variable a partir de él. Usamos esto junto con preg_replace para que podamos eliminar los caracteres que no necesitamos. Luego, como buena práctica y medida de seguridad, escapamos de nuestros valores para prepararlos para su inserción en la base de datos. Si todo va bien, debemos devolver el éxito a nuestro JavaScript para que sepa que todo salió bien.

Finalmente

Ahora que tenemos lo que necesitamos en su lugar, para tomar las coordenadas de posición de nuestro elemento y pasarlas a PHP para almacenarlas, necesitamos modificar nuestro HTML para reflejar la posición de nuestro elemento. Para hacer esto cambiamos el elemento básico HTML y en su lugar lo creamos con PHP:

<div id="glassbox">
<?php
		//Create a query to fetch our values from the database 	
		$get_coords = mysqli_query($link, "SELECT * FROM coords");
		//We then set variables from the * array that is fetched from the database
        while($row = mysqli_fetch_array($get_coords)) {
			$x = $row['x_pos'];
			$y = $row['y_pos'];
			//then echo our div element with CSS properties to set the left(x) and top(y) values of the element
			echo '<div id="element" style="left:'.$x.'px; top:'.$y.'px;"><img src="nettuts.jpg" alt="Nettuts+" />Move the Box<p></p></div>';
		}			
?>
</div>
<div id="respond"></div>

Aquí configuramos una consulta básica a la base de datos para seleccionar todas las filas de la tabla coords. Luego invocamos un ciclo while que especifica cada fila que seleccionamos como $row. Ahora podemos establecer algunas variables para que sean iguales a cada fila individual que extraemos de la base de datos y repetirlas en el lugar adecuado dentro del estilo de los elementos (izquierda y arriba).

Terminando

Bueno, espero que hayas disfrutado este tutorial tanto como yo escribiéndolo. Puede que no sea perfecto. Si bien esta es solo una forma de obtener esta funcionalidad en un elemento que se puede arrastrar, hay otras formas (y quizás mejores) de lograrlo. Una vez así, podría almacenar los valores de las coordenadas en una cookie, para mantener las llamadas a la base de datos al mínimo. También puedes serializar los valores pasados de jQuery a PHP en lugar de usar JSON. Este tutorial es solo un ejemplo del que puedes ampliar. ¡Gracias por leer!

Síguenos en Twitter o suscríbete a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en línea.