Portada » JQuery biblioteca de JavaScript » Drag Drop arrastrar y ordenar listas PHP jQuery

Drag Drop arrastrar y ordenar listas PHP jQuery

Drag Drop arrastrar y ordenar listas PHP jQuery. Cuando estemos desarrollando sistemas web, siempre llegamos a este punto de ordenar los registros extraidos de la base de datos usando PHP. Los datos en algunos casos ingresamos sin percatarnos el orden de ingreso.

Sin embargo para ordenar esos registros podria resultar una tarea titanica. Si bien, podriamos hacerlo con las clausulas del MySQL. Por lo tanto, aplicando esos criterios aun asi no es resultado deseado.

Drag Drop arrastrar y ordenar listas PHP jQuery

Para lograr un filtro personalizado al 100% tendríamos que utilizar otros métodos para lograr nuestro objetivo. Y una de ellas es el uso del lenguaje de programación jQuery con PHP. Esa unión le da un dinamismo único y podemos usarlo en una infinidad de casos.

Sus usos son variados en el desarrollo web. Sin embargo, unos de sus prioridades serian ordenar listas de nuestras tablas en nuestra base de datos. Usando el puntero del mouse.

¿Qué lenguajes necesitamos para que esto funcione?

  • Lenguaje de programación PHP.
  • Jquery como lenguaje primordial que nos brindara esta opción de ordenar con drag and drop.
  • Una base de datos MySQL que almacena los registros a ordenar.

Descripción y ejemplo de draggable. Permite que los elementos se muevan con el mouse, podemos arrastrar y mover los elementos a otro sector de la paginas web.

$( ".selector" ).draggable({
addClasses: false
});

La base de datos

Esta base de datos llamada «php_dragdrop» que contendrá una tabla con nombre «cursos«. Sin embargo, esta posee 3 columnas.

CREATE TABLE IF NOT EXISTS `cursos` (
`id` int(11) NOT NULL,
  `mis_cursos` varchar(255) DEFAULT NULL,
  `orden` int(11) DEFAULT NULL
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

--
-- Volcado de datos para la tabla `cursos`
--

INSERT INTO `cursos` (`id`, `mis_cursos`, `orden`) VALUES
(1, 'Curso de Microsfot Word', 7),
(2, 'Curso de  PHP', 1),
(3, 'Curso de Power Point', 5),
(4, 'Curso de Excel Financiero', 3),
(5, 'Curso de Excel Avanzado', 2),
(6, 'Curso de Publisher', 4),
(7, 'Curso de Base de Datos', 6);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `cursos`
--
ALTER TABLE `cursos`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `cursos`
--
ALTER TABLE `cursos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=8;

Fichero de conexión

Aquí mostramos las variables que hacen posible que este código PHP se conecte con MySQL de maneja fluida y pueda realizar la tal esperada ordenación de registros.

<?php
// Datos del servidor MySQL
$servidor = "localhost";
$usuariodb = "root";
$passworddb = "root";
$database = "php_dragdrop";
	
//Creando la conexion con el servidor
$conexion = mysqli_connect($servidor, $usuariodb, $passworddb, $database);
?>

Fichero index.php

Archivo en el cual mostrará los resultados de la base de datos y será la encargada de ordenar la lista de la DB usando jQuery y las listas de HTML

<ul id="mi_lista">
<?php
	$resultado_cursos = "SELECT * FROM cursos ORDER BY orden ASC";
	$resultado_cursos = mysqli_query($conexion, $resultado_cursos);
	while($registro_cursos = mysqli_fetch_assoc($resultado_cursos)){
?>
	<li id="miorden_<?php echo $registro_cursos['id']; ?>">
<?php
	echo $registro_cursos['id'] . " - ";
	echo $registro_cursos['mis_cursos'];
?>
	</li>
<?php
	}
?>
</ul>
Drag Drop arrastrar y ordenar listas PHP jQuery
Drag Drop arrastrar y ordenar listas PHP jQuery

CONCLUSIÓN

Si podemos observar de manera detallada es muy sencillo la implementación de esta funcionabilidad. Ustedes, pueden modificarlo a su antojo, agregarle más campos y/o editar campos.
Es un proceso muy recomendable porque para hacer esto no refresca la página web y nos ahorra recursos del servidor web.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad