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.

Ver ejemplo en funcionamiento

Ver portalet con estilos del framework jQuery UI

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

5 respuestas a “Draggable & Sortable con jQuery UI”

  1. […] alternativa al típico Sortable de jQuery UI para arrastrar y soltar elementos es SortableJS, una librería de JavaScript justamente para […]

  2. cesar dice:

    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.

    • Jose Aguilar dice:

      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

  3. […] Ver más sobre la función sortable() […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre