¿Cómo ordenar listas con jQuery?

Estrada Web Group
Administrador
¿Cómo ordenar listas con jQuery?

jquery ajax

En este artículo se muestra cómo crear una lista de elementos que se puede ordenar. El usuario  puede cambiar la posición de los elementos de la lista, arrastrando los elementos y podrá reemplazar otros elementos de la lista.

 

El ejemplo es el siguiente:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="ListOrder_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ordenar lista ul li con jQuery</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style type="text/css">
        body {
            font-family:Calibri, sans-serif;
        }
                #Value {
                    list-style-type: square;
                    padding: 0;
                    width: 40%;
                }

                    #Value li {
                        margin: 0 3px 3px 3px;
                        padding: 0.4em;
                        padding-left: 1.5em;
                        font-size: 1.0em;
                        height: 15px;
                        list-style:none;
                    }

                        #Value li span {
                            position: absolute;
                            margin-left: -1.3em;
                        }
            </style>

            <script type="text/javascript">
                $(function () {
                    $("#Value").sortable();
                    $("#Value").disableSelection();
                });

            </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>Sortable values</h3>
            <ul id="Value">
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 1</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 2</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 5</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 4</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 7</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 6</li>
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Lista 3</li>
            </ul>
        </div>
    </form>
</body>
</html>

aprende jquery ajax

Descarga el ejemplo aquí.

Compartir artículo:

Más artículos geniales

¿Cómo leer los atributos data de HTML5 con jQuery?

¿Cómo leer los atributos data de HTML5 con jQuery?

Una de las novedades de HTML5 es que podemos utilizar el atributo data para asignar valores personalizados a cada elemento HTML en particular.

Ver artículo completo
¿Cómo agregar un elemento a un array en JavaScript?

¿Cómo agregar un elemento a un array en JavaScript?

El método .push() de JavaScript agrega un elemento al final de una Array o arreglo. Después de agregar un elemento al final de la Array, y devuelve la nueva longitud de la matriz.

Ver artículo completo
Solución al problema de los acentos en JavaScript

Solución al problema de los acentos en JavaScript

En este tutorial aprenderás a solucionar el problema de los acentos en JavaScript, cuando intentamos enviar una alerta o un mensaje con JavaScript, este nos remplaza los acentos por otros caracteres, a continuación, te mostrare como solucionar este problema.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla
;