Draggable & Sortable con jQuery UI
En el proyecto de final de carrera que tuve que realizar hace unos años tuve que dinamizar el contenido de un portal de noticias donde una de las propuestas que realicé fue emplear el framework jQuery UI utilizar las funciones draggable y soratable.
Hoy he querido memorar esa programación que realicé en su día y la quiero compartir.
Para añadir estos efectos de mover y ordenar elementos en tu página Web lo vamos a explicar con un ejemplo de noticias en el cual deberás incluir en el <head> de tu página:
<script type="text/javascript" src="../jquery.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
});
</script>
Como puedes observar necesitaremos la librería jQuery, la customización del framework jQuery UI y la llamada a las función sortable() incluida en dicho framework.
Y en el <body> podríamos tener por ejemplo una lista de elementos:
<ul id="sortable">
<li>
<h1>Titular de la noticia 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ..</p>
</li>
..
</ul>
Y finalmente añadimos algo de estilos a estas listas en el <head> o en un archivo css que incluiremos en el <head> de la página:
ul#sortable {
float:left;
width:100%;
margin:0px;
padding:0px;
}
ul#sortable li {
float:left;
width:200px;
margin-right:10px;
margin-top:10px;
background-color:#CCCCCC;
border-radius:4px;
padding:5px;
box-shadow: 5px 5px 2px #888;
cursor:pointer;
list-style:none;
}
Para visualizar el resultado lo mejor es que veas el ejemplo en funcionamiento y comiences a mover elementos con posibilidad de guardar ese contenido ordenado según desees.
Autor
¿Buscas trabajo de programador?
5 respuestas a “Draggable & Sortable con jQuery UI”
Deja una respuesta
43 artículos que te podrían interesar
Ver más sobre
[…] alternativa al típico Sortable de jQuery UI para arrastrar y soltar elementos es SortableJS, una librería de JavaScript justamente para […]
[…] Ver más sobre la función sortable() […]
Hola Jose, este sencillo ejemplo no funciona, guardas en una variable contenido del DOM, pero cuando le das a guardar, simplemente te envía nuevamente a la misma página a través de un enlace 🙁
Si puedes corregirlo sería de gran ayuda 🙂
Un saludo.
Hola buenas tardes, el objetivo del tutorial no es el guardar en base de datos o archivo el resultado, sino aplicar el efecto y draggable y sortable. El guardar la estructura ya os lo dejo a vosotros. Saludos
[…] Ver más sobre la función sortable() […]