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>

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