Share
En algún momento, es posible que deba crear un elemento que se pueda arrastrar dentro de su aplicación web. Esta es una gran funcionalidad, sin embargo, es posible que desee o descubra que necesita que el elemento permanezca en su lugar después de ser arrastrado. En este tutorial te mostraré cómo arrastrar fácilmente un elemento y hacer que se pegue, incluso después de recargar una página, agarrando y almacenando sus coordenadas X e Y.
Así que tienes un elemento en tu aplicación web. Puedes arrastrarlo, ponerlo aquí y ponerlo allí. Pero, cuando la página se vuelve a cargar de alguna manera, el elemento vuelve a su posición predeterminada. Si bien desea que el elemento se pueda arrastrar, no desea que se mueva después de haber sido arrastrado. Veamos una solución simple para darnos esta habilidad..
Para este tutorial vamos a necesitar la biblioteca jQuery, la interfaz de usuario jQuery y el complemento jQuery-JSON de Brantley Harris. También utilizaremos algunos 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, rápida y liviana que es divertida y fácil de usar. La biblioteca tiene una documentación muy bien estructurada y una gran comunidad. Este es mi primer tutorial sobre jQuery y JavaScript, así que por favor tenga paciencia conmigo. Espero poder explicarlo todo lo mejor que pueda y si tiene alguna pregunta, no dude en preguntar.
Quería comenzar con el HTML y el estilo de este tutorial, ya que el efecto se aplica a los elementos HTML, me ayuda a visualizar lo que vamos a hacer, desde el principio. Primero el CSS:
html, cuerpo fondo: # 151515; margen: 0 0 0 0; relleno: 0 0 0 0; #glassbox background: # 333; borde: 1px sólido # 000; altura: 400px; margen: 30px auto auto auto; posición: relativa; ancho: 960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; #element background: # 666; borde: 1px # 000 sólido; cursor: mover; altura: 143px; relleno: 10px 10px 10px 10px; ancho: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; #responden color: #fff; margen: 0 auto 0 auto; ancho: 960px;
El CSS es muy simple. Establecemos las propiedades del cuerpo y html para borrar los márgenes y el relleno, y continuamos configurando algunas alturas, anchuras y otras propiedades para nuestros elementos para que no se vea tan suave. -moz-border-radius y -webkit-border-radius son dos propiedades que nos permiten crear bordes redondeados (solo aplicables a Mozilla Firefox y Safari 3 en este momento) para nuestros elementos. Echemos un vistazo al HTML:
Persistencia simple de elementos arrastrables con jQuery Mueve la caja
Como puede ver, acabamos de configurar una página muy agradable y simple que llama a nuestra biblioteca de CSS, JavaScript y complementos, y contiene los elementos que utilizaremos para aplicar algunos efectos y eventos. Como nota, el archivo jquery-ui es una compilación personalizada que solo incluye el núcleo y la funcionalidad de interacción que se puede arrastrar..
¡Ahora para un poco de interacción jugosa! Veamos primero algunas de las funciones básicas que usaremos para aplicar algunos efectos a nuestros elementos. Vamos a derribarlo.
Ok, ahora para un poco de demonio! En este fragmento vamos a hacer un par de cosas. Primero queremos configurar una matriz vacía, y luego obtener algunos valores para llenarla. Al llamar al controlador de eventos .mouseup (), le indicamos al navegador que busque el evento cuando usted haga clic con el mouse. Establecimos las coords variables para igualar nuestra matriz vacía, y otra vez configuramos la coordenada variable para igualar el manejador de posición de nuestro #elemento. Luego debemos crear una lista de elementos, estos serán coordTop: y coordLeft: respetando la igualdad de las posiciones izquierda y superior de nuestro elemento #. Con coords.push (artículo) estamos literalmente empujando nuestra lista de artículos y llenando la matriz de coords con ella. Luego, establezca el orden de las variables como una nueva lista donde la clave de coords sea igual a nuestra matriz de coords. Ahora para algunos AJAX.
$ .post es un controlador de solicitud AJAX que carga una página remota usando un método HTTP POST. Esta función busca los parámetros: url, datos, devolución de llamada y tipo de datos a devolver. En este tutorial especificamos el archivo updatecoords.php como nuestra URL porque aquí es donde queremos enviar nuestros datos de publicación, luego definimos nuestro tipo de datos incluyendo la función $ .toJSON definida en nuestro complemento jquery-JSON y estableciendo nuestra orden variable como los datos a ser manejados por .toJSON. A continuación, creamos una devolución de llamada que verifica una respuesta de retorno de nuestro archivo PHP luego del éxito, y agregamos un poco de sabor diciendo: "Si lo que se devuelve es igual al éxito, entonces ..." Mantenemos este código HTML oculto mediante el uso del controlador de efectos. Ocultar , y dígale que desaparezca a 1000 milisegundos, espere un tiempo de espera de 2000 milisegundos y dígale que desaparezca nuevamente. Al final nuestro JavaScript debería verse así:
Coloque el JavaScript debajo del HTML, justo después de la etiqueta de cierre del cuerpo.
Muy bien, ahora vamos a hacer negocios al hacer algo con los datos que se publican desde nuestro jQuery. Primero creamos una base de datos simple para almacenar nuestras coordenadas, que luego recuperaremos para definir la posición de nuestro elemento. El segundo será nuestro archivo config.php que almacenará la configuración de conexión de nuestra base de datos, y luego terminaremos con updatecords.php.
Accentsconagua
Base de datos: 'xycoords' CREAR TABLA SI NO EXISTE 'coords' ('id' int (11) NOT NULL AUTO_INCREMENT, 'x_pos' int (4) NOT NULL, 'y_pos' int (4) NOT NULL, PRIMARY KEY ('id ')) MOTOR = CARTAS POR DEFECTO DE MyISAM = latin1; config.php
updatecoords.php
coords como $ item) // Extraiga el número X para el panel $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop); // Extraiga el número Y para el panel $ coord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // escapar de nuestros valores, como buena práctica $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Configurar nuestra consulta $ sql = "ACTUALIZAR los acordes SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Ejecutar nuestra consulta mysqli_query ($ link, $ sql) o die ("Error al actualizar Coords:". Mysqli_error ()); // Return Success echo "success"; ?> Esto es bastante simple de seguir. Lo primero que queremos hacer es verificar que nuestros datos de publicación se transfieran al archivo. Si eso sucede, incluimos nuestro archivo de configuración para nuestra conexión de base de datos y configuramos la variable $ data a json_decode (variable de publicación aprobada); json_decode es una función de PHP implementada en PHP 5.2.0 que nos permite decodificar una cadena JSON.
Ya que nuestra variable $ data contiene una serie de datos, debemos separarla para obtener los valores que necesitamos. Para hacer esto, tomamos foreach $ data-> coords (que es de nuestra variable de pedido en nuestro JavaScript) como un artículo. Esto toma cada par de clave y valor y crea un objeto de elemento de la matriz, luego especificamos y creamos una variable a partir de ella. Usamos esto junto con preg_replace para poder eliminar los caracteres que no necesitamos. Entonces, como una buena práctica y una medida de seguridad, escapamos de nuestros valores para prepararlos para su inserción en la base de datos. Si todo va bien, debemos devolver el éxito a nuestro JavaScript para que sepa que todo salió bien..
Ahora que tenemos lo que necesitamos en su lugar, para tomar las coordenadas de posición de nuestro elemento y pasarlo a PHP para su almacenamiento, necesitamos modificar nuestro HTML para reflejar la posición de nuestro elemento. Para ello cambiamos el elemento básico HTML y en su lugar lo creamos con PHP:
'; ?>
Aquí configuramos una consulta básica a la base de datos para seleccionar todas las filas de los acordes de tabla. Luego invocamos un bucle while que especifica cada fila que seleccionamos como $ row. Ahora podemos establecer algunas variables para igualar cada fila individual que extraemos de la base de datos, y repetirlas en el lugar adecuado dentro del estilo de los elementos (izquierda y superior).
Bueno, espero que hayan disfrutado este tutorial tanto como yo al escribirlo. 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 quizás mejores) de lograrlo. Una vez, tal manera podría ser almacenar los valores de coordenadas en una cookie, para mantener las llamadas a la base de datos al mínimo. También puede serializar los valores pasados de jQuery a PHP en lugar de usar JSON. Este tutorial es solo un ejemplo desde el cual puede ampliarse. Gracias por leer!
