JqueryUI - Clasificable

jQueryUI proporciona sortable()método para reordenar elementos en una lista o cuadrícula usando el mouse. Este método realiza una acción de ordenación basada en una cadena de operación pasada como primer parámetro.

Sintaxis

los sortable () El método se puede utilizar de dos formas:

$ (selector, contexto) .sortable (opciones) Método

El método ordenable (opciones) declara que un elemento HTML contiene elementos intercambiables. El parámetro de opciones es un objeto que especifica el comportamiento de los elementos involucrados durante el reordenamiento.

Sintaxis

$(selector, context).sortable(options);

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 appendTo

Esta opción especifica el elemento en el que se insertará el nuevo elemento creado con options.helper durante el tiempo de movimiento / arrastre. Por defecto su valor esparent.

Option - appendTo

Esta opción especifica el elemento en el que se insertará el nuevo elemento creado con options.helper durante el tiempo de movimiento / arrastre. Por defecto su valor esparent.

Esto puede ser de tipo:

  • Selector - Esto indica un selector que especifica a qué elemento agregar el ayudante.

  • jQuery - Esto indica un objeto jQuery que contiene el elemento al que agregar el ayudante.

  • Element - Un elemento en el Modelo de objetos de documento (DOM) para agregar el ayudante.

  • String - La cadena "padre" hará que el ayudante sea hermano del elemento ordenable.

Syntax

$(".selector").sortable(
   { appendTo: document.body }
);
2 eje

Esta opción indica un eje de movimiento ("x" es horizontal, "y" es vertical). Por defecto su valor esfalse.

Option - axis

Esta opción indica un eje de movimiento ("x" es horizontal, "y" es vertical). Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { axis: "x" }
);
3 cancelar

Esta opción se utiliza para evitar la clasificación de elementos haciendo clic en cualquiera de los elementos del selector. Por defecto su valor es"input,textarea,button,select,option".

Option - cancel

Esta opción se utiliza para evitar la clasificación de elementos haciendo clic en cualquiera de los elementos del selector. Por defecto su valor es"input,textarea,button,select,option".

Syntax

$(".selector").sortable(
   { cancel: "a,button" }
);
4 conectar con

Esta opción es un selector que identifica otro elemento clasificable que puede aceptar elementos de este clasificable. Esto permite que los elementos de una lista se muevan a otras listas, una interacción de usuario frecuente y útil. Si se omite, no se conecta ningún otro elemento. Esta es una relación unidireccional. Por defecto su valor esfalse.

Option - connectWith

Esta opción es un selector que identifica otro elemento clasificable que puede aceptar elementos de este clasificable. Esto permite que los elementos de una lista se muevan a otras listas, una interacción de usuario frecuente y útil. Si se omite, no se conecta ningún otro elemento. Esta es una relación unidireccional. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 contención

Esta opción indica un elemento dentro del cual tiene lugar el desplazamiento. El elemento estará representado por un selector (solo se considerará el primer elemento de la lista), un elemento DOM o la cadena "padre" (elemento padre) o "ventana" (página HTML).

Option - containment

Esta opción indica un elemento dentro del cual tiene lugar el desplazamiento.

Esto puede ser de tipo:

  • Selector- Esto indica un selector. El elemento estará representado por un selector (solo se considerará el primer elemento de la lista)

  • Element - Un elemento DOM para usar como contenedor.

  • String- La cadena que identifica un elemento para usar como contenedor. Los valores posibles son padre (elemento padre), documento o ventana (página HTML).

Syntax

$(".selector").sortable(
   { containment: "parent" }
);
6 cursor

Especifica la propiedad CSS del cursor cuando el elemento se mueve. Representa la forma del puntero del mouse. Por defecto, su valor es "auto".

Option - cursor

Especifica la propiedad CSS del cursor cuando el elemento se mueve. Representa la forma del puntero del mouse. Por defecto, su valor es "auto". Los valores posibles son:

  • "cruz" (transversal)
  • "predeterminado" (una flecha)
  • "pointer" (mano)
  • "mover" (dos flechas se cruzan)
  • "e-resize" (expandir a la derecha)
  • "ne-resize" (expandir hacia la derecha)
  • "nw-resize" (expandir hacia la izquierda)
  • "n-resize" (expandir hacia arriba)
  • "se-resize" (expandir hacia abajo a la derecha)
  • "sw-resize" (expandir hacia abajo a la izquierda)
  • "s-resize" (expandir hacia abajo)
  • "auto" (predeterminado)
  • "w-resize" (expandir a la izquierda)
  • "texto" (puntero para escribir texto)
  • "espera" (reloj de arena)
  • "ayuda" (puntero de ayuda)

Syntax

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

Establece el desplazamiento del ayudante de arrastre en relación con el cursor del mouse. Las coordenadas se pueden dar como un hash usando una combinación de una o dos teclas: {arriba, izquierda, derecha, abajo}. Por defecto, su valor es "falso".

Option - cursorAt

Establece el desplazamiento del ayudante de arrastre en relación con el cursor del mouse. Las coordenadas se pueden dar como un hash usando una combinación de una o dos teclas: {arriba, izquierda, derecha, abajo}. Por defecto, su valor es "falso".

Syntax

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 retrasar

Retraso, en milisegundos, tras el cual se tiene en cuenta el primer movimiento del ratón. El desplazamiento puede comenzar después de ese tiempo. Por defecto, su valor es "0".

Option - delay

Retraso, en milisegundos, tras el cual se tiene en cuenta el primer movimiento del ratón. El desplazamiento puede comenzar después de ese tiempo. Por defecto, su valor es "0".

Syntax

$(".selector").sortable(
   { delay: 150 }
);
9 discapacitado

Esta opción, si se establece en verdadero , deshabilita la funcionalidad ordenable. Por defecto su valor esfalse.

Option - disabled

Esta opción, si se establece en verdadero , deshabilita la funcionalidad ordenable. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { disabled: true }
);
10 distancia

Número de píxeles que debe mover el mouse antes de que comience la clasificación. Si se especifica, la clasificación no comenzará hasta que el mouse se arrastre más allá de la distancia. Por defecto, su valor es "1".

Option - distance

Número de píxeles que debe mover el mouse antes de que comience la clasificación. Si se especifica, la clasificación no comenzará hasta que el mouse se arrastre más allá de la distancia. Por defecto, su valor es "1".

Syntax

$(".selector").sortable(
   { distance: 5 }
);
11 dropOnEmpty

Si esta opción se establece en false , los elementos de este ordenable no se pueden colocar en un ordenable de conexión vacío. Por defecto su valor estrue.

Option - dropOnEmpty

Si esta opción se establece en false , los elementos de este ordenable no se pueden colocar en un ordenable de conexión vacío. Por defecto su valor estrue.

Syntax

$(".selector").sortable(
   { dropOnEmpty: false }
);
12 forceHelperSize

Si esta opción se establece en true, obliga al ayudante a tener un tamaño. Por defecto su valor esfalse.

Option - forceHelperSize

Si esta opción se establece en true, obliga al ayudante a tener un tamaño. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { forceHelperSize: true }
);
13 forcePlaceholderSize

Esta opción, cuando se establece en verdadero , tiene en cuenta el tamaño del marcador de posición cuando se mueve un elemento. Esta opción solo es útil si options.placeholder está inicializado. Por defecto su valor esfalse.

Option - forcePlaceholderSize

Esta opción, cuando se establece en verdadero , tiene en cuenta el tamaño del marcador de posición cuando se mueve un elemento. Esta opción solo es útil si options.placeholder está inicializado. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 cuadrícula

Esta opción es una matriz [x, y] que indica el número de píxeles que el elemento de clasificación mueve horizontal y verticalmente durante el desplazamiento del mouse. Por defecto su valor esfalse.

Option - grid

Esta opción es una matriz [x, y] que indica el número de píxeles que el elemento de clasificación mueve horizontal y verticalmente durante el desplazamiento del mouse. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 encargarse de

Si se especifica, restringe el inicio de la ordenación a menos que el mousedown ocurra en los elementos especificados. Por defecto su valor esfalse.

Option - handle

Si se especifica, restringe el inicio de la ordenación a menos que el mousedown ocurra en los elementos especificados. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
dieciséis ayudante

Permite utilizar un elemento auxiliar para arrastrar la pantalla. Por defecto su valor esoriginal.

Option - helper

Permite utilizar un elemento auxiliar para arrastrar la pantalla. Por defecto su valor esoriginal. Los valores posibles son:

  • String - Si se establece en "clonar", el elemento se clonará y el clon se arrastrará.

  • Function - Una función que devolverá un DOMElement para usar mientras se arrastra.

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 artículos

Esta opción especifica qué elementos dentro del elemento DOM se ordenarán. Por defecto su valor es> *.

Option - items

Esta opción especifica qué elementos dentro del elemento DOM se ordenarán. Por defecto su valor es> *

Syntax

$(".selector").sortable(
   { items: "> li" }
);
18 opacidad

Esta opción se usa para definir la opacidad del ayudante mientras ordena. Por defecto su valor esfalse.

Option - opacity

Esta opción se usa para definir la opacidad del ayudante mientras ordena. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 marcador de posición

Esta opción se utiliza para el nombre de la clase que se aplica al espacio en blanco de otro modo. De forma predeterminada, su valor es false.

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 revertir

Esta opción decide si los elementos clasificables deben volver a sus nuevas posiciones mediante una animación suave. Por defecto su valor esfalse.

Option - revert

Esta opción decide si los elementos clasificables deben volver a sus nuevas posiciones mediante una animación suave. Por defecto su valor esfalse.

Syntax

$(".selector").sortable(
   { revert: true }
);
21 Desplazarse

Esta opción se utiliza para habilitar el desplazamiento. Si se establece en verdadero, la página se desplaza al llegar a un borde. Por defecto su valor estrue.

Option - scroll

Esta opción se utiliza para habilitar el desplazamiento. Si se establece en verdadero, la página se desplaza al llegar a un borde. Por defecto su valor estrue.

Syntax

$(".selector").sortable(
   { scroll: false }
);
22 scrollSensitivity

Esta opción indica cuántos píxeles debe salir el ratón del área visible para provocar el desplazamiento. Por defecto su valor es20. Esta opción se usa solo con options.scroll establecido en true.

Option - scrollSensitivity

Esta opción indica cuántos píxeles debe salir el ratón del área visible para provocar el desplazamiento. Por defecto su valor es20. Esta opción se usa solo con options.scroll establecido en true.

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 Velocidad de desplazamiento

Esta opción indica la velocidad de desplazamiento de la pantalla una vez que comienza el desplazamiento. Por defecto su valor es20.

Option - scrollSpeed

Esta opción indica la velocidad de desplazamiento de la pantalla una vez que comienza el desplazamiento. Por defecto su valor es20.

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolerancia

Esta opción es una cadena que especifica qué modo usar para probar si el elemento que se mueve se desplaza sobre otro elemento. Por defecto su valor es"intersect".

Option - tolerance

Esta opción es una cadena que especifica qué modo usar para probar si el elemento que se mueve se desplaza sobre otro elemento. Por defecto su valor es"intersect"Los valores posibles son:

  • intersect - El artículo se superpone al otro artículo en al menos un 50%.

  • pointer - El puntero del mouse se superpone al otro elemento.

Syntax

$(".selector").sortable(
   { tolerance: "pointer" }
);
25 zIndex

Esta opción representa el índice z para el elemento / ayudante mientras se ordena. Por defecto su valor es1000.

Option - zIndex

Esta opción representa el índice Z para el elemento / ayudante mientras se ordena. Por defecto su valor es1000.

Syntax

$(".selector").sortable(
   { zIndex: 9999 }
);

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de arrastre.

Funcionalidad predeterminada

El siguiente ejemplo demuestra un ejemplo simple de funcionalidad ordenable, sin pasar parámetros al sortable() método.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Reorganice los productos de arriba, use el mouse para arrastrar los elementos.

Uso de opciones de retardo y distancia

El siguiente ejemplo demuestra el uso de tres opciones (a) delay y (b) distance en la función de ordenación de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Reorganice los productos de arriba, use el mouse para arrastrar los elementos. Para evitar la clasificación accidental, ya sea por retraso (tiempo) o distancia, hemos establecido una cantidad de milisegundos que el elemento debe arrastrarse antes de que comience la clasificación con la opción de retraso . También hemos establecido una distancia en píxeles que el elemento debe ser arrastrado antes de que comience la clasificación con la opción de distancia .

Uso de marcador de posición

El siguiente ejemplo demuestra el uso de tres opciones placeholder en la función de ordenación de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente arrastrar elementos para reorganizarlos, mientras arrastra elementos, el marcador de posición (hemos utilizado la clase de resaltado para diseñar este espacio) aparecerá en un lugar disponible.

Uso de las opciones Connectwith y Droponempty

El siguiente ejemplo demuestra el uso de tres opciones (a) connectWith y (b) dropOnEmpty en la función de ordenación de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Ordene los elementos de una Lista1 a otra (Lista2) y viceversa, pasando un selector a la opción connectWith . Esto se hace agrupando todas las listas relacionadas con una clase CSS y luego pasando esa clase a la función ordenable (es decir, connectWith: '# sortable-5, # sortable-6').

Intente arrastrar los elementos de la Lista 3 a la Lista 2 o la Lista 1. Como hemos establecido la opción dropOnEmpty en falso , no será posible soltar estos elementos.

$ (selector, context) .sortable ("action", [params]) Método

El método ordenable (acción, parámetros) puede realizar una acción en los elementos ordenables, como para evitar el desplazamiento. losaction se especifica como una cadena en el primer argumento y, opcionalmente, uno o más params se puede proporcionar en función de la acción dada.

Básicamente, aquí las acciones no son nada, pero son métodos jQuery que podemos usar en forma de cadena.

Sintaxis

$(selector, context).sortable ("action", [params]);

La siguiente tabla enumera las acciones para este método:

No Señor. Acción Descripción
1 cancelar()

Esta acción cancela la operación de clasificación actual. Esto es más útil dentro de los controladores para ordenar, recibir y ordenar eventos de detención. Este método no acepta argumentos.

Action - cancel()

Cancela la operación de clasificación actual. Esto es más útil dentro de los controladores para ordenar, recibir y ordenar eventos de detención. Este método no acepta argumentos.

Syntax

$(".selector").sortable("cancel");
2 destruir()

Esta acción elimina por completo la funcionalidad de ordenación. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy()

Esta acción elimina por completo la funcionalidad de ordenación. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$(".selector").sortable("destroy");
3 inhabilitar()

Esta acción deshabilita la ordenabilidad de cualquier elemento ordenable en el conjunto envuelto. La ordenabilidad de los elementos no se elimina y se puede restaurar llamando a la variante enable de este método. Este método no acepta argumentos.

Action - disable()

Esta acción deshabilita la ordenabilidad de cualquier elemento ordenable en el conjunto envuelto. La ordenabilidad de los elementos no se elimina y se puede restaurar llamando a la variante enable de este método. Este método no acepta argumentos.

Syntax

$(".selector").sortable("disable");
4 habilitar()

Vuelve a habilitar la ordenación en cualquier elemento ordenable en el conjunto empaquetado cuya ordenación se haya deshabilitado. Tenga en cuenta que este método no agregará ordenabilidad a ningún elemento no ordenable. Este método no acepta argumentos.

Action - enable()

Vuelve a habilitar la ordenación en cualquier elemento ordenable en el conjunto empaquetado cuya ordenación se haya deshabilitado. Tenga en cuenta que este método no agregará ordenabilidad a ningún elemento no ordenable. Este método no acepta argumentos.

Syntax

$(".selector").sortable("enable");
5 opción (optionName)

Esta acción obtiene el valor asociado actualmente con el optionName especificado . Donde optionName es el nombre de la opción a obtener.

Action - option( optionName )

Esta acción obtiene el valor asociado actualmente con el optionName especificado . Donde optionName es el nombre de la opción a obtener.

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 opción()

Obtiene un objeto que contiene pares clave / valor que representan el hash de opciones ordenables actual. Este método no acepta ningún argumento.

Action - option()

Obtiene un objeto que contiene pares clave / valor que representan el hash de opciones ordenables actual. Este método no acepta ningún argumento.

Syntax

$(".selector").sortable("option");
7 opción (optionName, valor)

Esta acción establece el valor de la opción clasificable asociada con el optionName especificado . Donde optionName es el nombre de la opción para establecer y valor es el valor para establecer para la opción.

Action - option( optionName, value )

Esta acción establece el valor de la opción clasificable asociada con el optionName especificado . Donde optionName es el nombre de la opción para establecer y valor es el valor para establecer para la opción.

Syntax

$(".selector").sortable("option", "disabled", true);
8 opción (opciones)

Establece una o más opciones para la ordenación. Donde opciones es un mapa de pares opción-valor para establecer.

Action - option( options )

Establece una o más opciones para la ordenación. Donde opciones es un mapa de pares opción-valor para establecer.

Syntax

$( ".selector" ).sortable( "option", { disabled: true } );
9 actualizar()

Esta acción actualiza la lista de elementos si es necesario. Este método no acepta argumentos. Llamar a este método hará que se reconozcan los elementos nuevos agregados al ordenamiento.

Action - refresh()

Esta acción actualiza la lista de elementos si es necesario. Este método no acepta argumentos. Llamar a este método hará que se reconozcan los elementos nuevos agregados al ordenamiento.

Syntax

$(".selector").sortable("refresh");
10 toArray (opciones)

Este método devuelve una matriz de los valores de id de los elementos clasificables en orden ordenado. Este método toma Opciones como parámetro, para personalizar la serialización o el orden de clasificación.

Action - toArray( options )

Este método devuelve una matriz de los valores de id de los elementos clasificables en orden ordenado. Este método toma Opciones como parámetro, para personalizar la serialización o el orden de clasificación.

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serializar (opciones)

Este método devuelve una cadena de consulta serializada (que se puede enviar a través de Ajax) formada a partir del ordenable.

Action - serialize( options )

Este método devuelve una cadena de consulta serializada (que se puede enviar a través de Ajax) formada a partir del ordenable. Funciona de forma predeterminada mirando la identificación de cada elemento en el formato "setname_number", y escupe un hash como "setname [] = número y setname [] = número".

Syntax

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions ()

Este método se utiliza principalmente de forma interna para actualizar la información almacenada en caché del ordenable. Este método no acepta argumentos.

Action - refreshPositions()

Este método se utiliza principalmente de forma interna para actualizar la información almacenada en caché del ordenable. Este método no acepta argumentos.

Syntax

$(".selector").sortable("refreshPositions");
13 widget ()

Este método devuelve un objeto jQuery que contiene el elemento ordenable. Este método no acepta argumentos.

Action - widget()

Este método devuelve un objeto jQuery que contiene el elemento ordenable. Este método no acepta argumentos.

Syntax

$(".selector").sortable("widget");

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método toArray (opciones) .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente ordenar los elementos, el orden de los elementos se muestra en la parte inferior. Aquí llamamos $ (this) .sortable ('toArray'). ToString () , que dará una lista de cadenas de todos los identificadores de elementos, podría verse como1,2,3,4.

Gestión de eventos en los elementos clasificables

Además del método clasificable (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 activar (evento, ui)

Este evento se activa en la ordenación cuando se inicia una operación de ordenación en la ordenación conectada.

Event - activate(event, ui)

Este evento se activa en la ordenación cuando se inicia una operación de ordenación en la ordenación conectada. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop (evento, ui)

Este evento se activa cuando la operación de ordenación está a punto de finalizar, con la referencia del elemento auxiliar y del marcador de posición aún válida.

Event - beforeStop(event, ui)

Este evento se activa cuando la operación de ordenación está a punto de finalizar, con la referencia del elemento auxiliar y del marcador de posición aún válida. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 cambiar (evento, ui)

Este evento se activa cuando el elemento ordenado cambia de posición dentro del DOM.

Event - change(event, ui)

Este evento se activa cuando el elemento ordenado cambia de posición dentro del DOM. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 crear (evento, ui)

Este evento se activa cuando se crea la ordenación.

Event - create(event, ui)

Este evento se activa cuando se crea la ordenación. Donde evento es de tipo Evento y ui es de tipo Objeto . El objeto de interfaz de usuario está vacío, pero se incluye para mantener la coherencia con otros eventos.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 desactivar (evento, ui)

Este evento se activa cuando se detiene una clasificación conectada y se propaga a la clasificación conectada.

Event - deactivate(event, ui)

Este evento se activa cuando se detiene una clasificación conectada y se propaga a la clasificación conectada. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out (evento, ui)

Este evento se activa cuando el elemento de clasificación se retira de una lista conectada.

Event - out(event, ui)

Este evento se activa cuando el elemento de clasificación se retira de una lista conectada. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 over (evento, ui)

Este evento se activa cuando un elemento de clasificación se mueve a una lista conectada.

Event - over(event, ui)

Este evento se activa cuando un elemento de clasificación se mueve a una lista conectada. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 recibir (evento, ui)

Este evento se activa cuando una lista conectada ha recibido un elemento de clasificación de otra lista.

Event - receive(event, ui)

Este evento se activa cuando una lista conectada ha recibido un elemento de clasificación de otra lista. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 eliminar (evento, ui)

Este evento se activa cuando el elemento de clasificación se elimina de una lista conectada y se arrastra a otra.

Event - remove(event, ui)

Este evento se activa cuando el elemento de clasificación se elimina de una lista conectada y se arrastra a otra. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sort (evento, ui)

Este evento se activa repetidamente para eventos mousemove durante una operación de clasificación.

Event - sort(event, ui)

Este evento se activa repetidamente para eventos mousemove durante una operación de clasificación. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 inicio (evento, ui)

Este evento se activa cuando se inicia una operación de clasificación.

Event - start(event, ui)

Este evento se activa cuando se inicia una operación de clasificación. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 detener (evento, ui)

Este evento se activa cuando finaliza una operación de clasificación.

Event - stop(event, ui)

Este evento se activa cuando finaliza una operación de clasificación. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 actualizar (evento, ui)

Este evento se activa cuando se detiene una operación de clasificación y se cambia la posición del elemento.

Event - update(event, ui)

Este evento se activa cuando se detiene una operación de clasificación y se cambia la posición del elemento. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • helper - Un objeto jQuery que representa el ayudante que se está ordenando.

  • item - Un objeto jQuery que representa el elemento arrastrado actual.

  • offset - La posición absoluta actual del ayudante representada como {arriba, izquierda} ..

  • position - Posición CSS actual del ayudante como objeto {arriba, izquierda}.

  • originalPosition - La posición original del elemento representado como {top, left}.

  • sender - La ordenación de la que proviene el elemento si se pasa de una ordenación a otra.

  • placeholder - El objeto jQuery que representa el elemento que se utiliza como marcador de posición.

Syntax

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento durante la funcionalidad de caída. Este ejemplo demuestra el uso de eventos recibir , iniciar y detener .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Guardemos el código anterior en un archivo HTML sortexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente ordenar los elementos en la Lista 1, verá que el mensaje se muestra al inicio y al final del evento. Ahora suelte los elementos de la Lista 2 a la Lista 1, nuevamente se muestra un mensaje en el evento de recepción .