JqueryUI - Ordinabile

jQueryUI fornisce sortable()metodo per riordinare gli elementi nell'elenco o nella griglia utilizzando il mouse. Questo metodo esegue un'azione di selezionabilità basata su una stringa di operazione passata come primo parametro.

Sintassi

Il sortable () può essere utilizzato in due forme:

$ (selettore, contesto) .sortable (opzioni) Metodo

Il metodo sortable (opzioni) dichiara che un elemento HTML contiene elementi intercambiabili. Il parametro options è un oggetto che specifica il comportamento degli elementi coinvolti durante il riordino.

Sintassi

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 appendTo

Questa opzione specifica l'elemento in cui verrà inserito il nuovo elemento creato con options.helper durante il tempo di spostamento / trascinamento. Per impostazione predefinita, il suo valore èparent.

Option - appendTo

Questa opzione specifica l'elemento in cui verrà inserito il nuovo elemento creato con options.helper durante il tempo di spostamento / trascinamento. Per impostazione predefinita, il suo valore èparent.

Questo può essere di tipo -

  • Selector - Indica un selettore che specifica a quale elemento aggiungere l'helper ..

  • jQuery - Indica un oggetto jQuery contenente l'elemento a cui aggiungere l'helper.

  • Element - Un elemento nel DOM (Document Object Model) a cui aggiungere l'helper.

  • String - La stringa "genitore" farà sì che l'helper sia un fratello dell'elemento ordinabile.

Syntax

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

Questa opzione indica un asse di movimento ("x" è orizzontale, "y" è verticale). Per impostazione predefinita, il suo valore èfalse.

Option - axis

Questa opzione indica un asse di movimento ("x" è orizzontale, "y" è verticale). Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione viene utilizzata per impedire l'ordinamento degli elementi facendo clic su uno qualsiasi degli elementi del selettore. Per impostazione predefinita, il suo valore è"input,textarea,button,select,option".

Option - cancel

Questa opzione viene utilizzata per impedire l'ordinamento degli elementi facendo clic su uno qualsiasi degli elementi del selettore. Per impostazione predefinita, il suo valore è"input,textarea,button,select,option".

Syntax

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

Questa opzione è un selettore che identifica un altro elemento ordinabile che può accettare elementi da questo ordinabile. Ciò consente di spostare gli elementi di un elenco in altri elenchi, un'interazione utente frequente e utile. Se omesso, nessun altro elemento è connesso. Questa è una relazione unidirezionale. Per impostazione predefinita, il suo valore èfalse.

Option - connectWith

Questa opzione è un selettore che identifica un altro elemento ordinabile che può accettare elementi da questo ordinabile. Ciò consente di spostare gli elementi di un elenco in altri elenchi, un'interazione utente frequente e utile. Se omesso, nessun altro elemento è connesso. Questa è una relazione unidirezionale. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 contenimento

Questa opzione indica un elemento all'interno del quale avviene lo spostamento. L'elemento sarà rappresentato da un selettore (sarà considerato solo il primo elemento nell'elenco), un elemento DOM o la stringa "genitore" (elemento genitore) o "finestra" (pagina HTML).

Option - containment

Questa opzione indica un elemento all'interno del quale avviene lo spostamento.

Questo può essere di tipo -

  • Selector- Questo indica un selettore. L'elemento sarà rappresentato da un selettore (verrà considerato solo il primo elemento della lista)

  • Element - Un elemento DOM da utilizzare come contenitore.

  • String- La stringa che identifica un elemento da utilizzare come contenitore. I valori possibili sono genitore (elemento genitore), documento o finestra (pagina HTML).

Syntax

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

Specifica la proprietà CSS del cursore quando l'elemento si sposta. Rappresenta la forma del puntatore del mouse. Per impostazione predefinita, il suo valore è "auto".

Option - cursor

Specifica la proprietà CSS del cursore quando l'elemento si sposta. Rappresenta la forma del puntatore del mouse. Per impostazione predefinita, il suo valore è "auto". I valori possibili sono -

  • "mirino" (attraverso)
  • "default" (una freccia)
  • "pointer" (mano)
  • "move" (due frecce incrociate)
  • "e-resize" (espandi a destra)
  • "ne-resize" (espandi in alto a destra)
  • "nw-resize" (espandi in alto a sinistra)
  • "n-resize" (espandi verso l'alto)
  • "se-resize" (espandi in basso a destra)
  • "sw-resize" (espandi in basso a sinistra)
  • "s-resize" (espandi verso il basso)
  • "auto" (predefinito)
  • "w-resize" (espandi a sinistra)
  • "testo" (puntatore per scrivere testo)
  • "aspetta" (clessidra)
  • "help" (puntatore di aiuto)

Syntax

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

Imposta l'offset dell'helper di trascinamento rispetto al cursore del mouse. Le coordinate possono essere date come un hash utilizzando una combinazione di uno o due tasti: {top, left, right, bottom}. Per impostazione predefinita, il suo valore è "false".

Option - cursorAt

Imposta l'offset dell'helper di trascinamento rispetto al cursore del mouse. Le coordinate possono essere date come un hash utilizzando una combinazione di uno o due tasti: {top, left, right, bottom}. Per impostazione predefinita, il suo valore è "false".

Syntax

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

Ritardo, in millisecondi, dopo il quale viene preso in considerazione il primo movimento del mouse. Lo spostamento può iniziare dopo quel tempo. Per impostazione predefinita, il suo valore è "0".

Option - delay

Ritardo, in millisecondi, dopo il quale viene preso in considerazione il primo movimento del mouse. Lo spostamento può iniziare dopo quel tempo. Per impostazione predefinita, il suo valore è "0".

Syntax

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

Questa opzione, se impostata su true , disabilita la funzionalità ordinabile. Per impostazione predefinita, il suo valore èfalse.

Option - disabled

Questa opzione, se impostata su true , disabilita la funzionalità ordinabile. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Numero di pixel che il mouse deve essere spostato prima che inizi l'ordinamento. Se specificato, l'ordinamento non inizierà fino a quando il mouse non sarà stato trascinato oltre la distanza. Per impostazione predefinita, il suo valore è "1".

Option - distance

Numero di pixel che il mouse deve essere spostato prima che inizi l'ordinamento. Se specificato, l'ordinamento non inizierà fino a quando il mouse non sarà stato trascinato oltre la distanza. Per impostazione predefinita, il suo valore è "1".

Syntax

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

Questa opzione se impostata su false , gli elementi da questo ordinabile non possono essere rilasciati su una connessione ordinabile vuota. Per impostazione predefinita, il suo valore ètrue.

Option - dropOnEmpty

Questa opzione se impostata su false , gli elementi da questo ordinabile non possono essere rilasciati su una connessione ordinabile vuota. Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Se questa opzione se impostata su true forza l'helper ad avere una dimensione. Per impostazione predefinita, il suo valore èfalse.

Option - forceHelperSize

Se questa opzione se impostata su true forza l'helper ad avere una dimensione. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione, se impostata su true , tiene conto delle dimensioni del segnaposto quando un elemento viene spostato. Questa opzione è utile solo se options.placeholder è inizializzato. Per impostazione predefinita, il suo valore èfalse.

Option - forcePlaceholderSize

Questa opzione, se impostata su true , tiene conto delle dimensioni del segnaposto quando un elemento viene spostato. Questa opzione è utile solo se options.placeholder è inizializzato. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 griglia

Questa opzione è una matrice [x, y] che indica il numero di pixel che l'elemento di ordinamento si sposta orizzontalmente e verticalmente durante lo spostamento del mouse. Per impostazione predefinita, il suo valore èfalse.

Option - grid

Questa opzione è una matrice [x, y] che indica il numero di pixel che l'elemento di ordinamento si sposta orizzontalmente e verticalmente durante lo spostamento del mouse. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Se specificato, limita l'avvio dell'ordinamento a meno che il mouse non si verifichi sugli elementi specificati. Per impostazione predefinita, il suo valore èfalse.

Option - handle

Se specificato, limita l'avvio dell'ordinamento a meno che il mouse non si verifichi sugli elementi specificati. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
16 aiutante

Consente di utilizzare un elemento di supporto per trascinare la visualizzazione. Per impostazione predefinita, il suo valore èoriginal.

Option - helper

Consente di utilizzare un elemento di supporto per trascinare la visualizzazione. Per impostazione predefinita, il suo valore èoriginal. I valori possibili sono -

  • String - Se impostato su "clone", l'elemento verrà clonato e il clone verrà trascinato.

  • Function - Una funzione che restituirà un DOMElement da utilizzare durante il trascinamento.

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 elementi

Questa opzione specifica quali elementi all'interno dell'elemento DOM devono essere ordinati. Per impostazione predefinita, il suo valore è> *.

Option - items

Questa opzione specifica quali elementi all'interno dell'elemento DOM devono essere ordinati. Per impostazione predefinita, il suo valore è> *

Syntax

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

Questa opzione viene utilizzata per definire l'opacità dell'helper durante l'ordinamento. Per impostazione predefinita, il suo valore èfalse.

Option - opacity

Questa opzione viene utilizzata per definire l'opacità dell'helper durante l'ordinamento. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 segnaposto

Questa opzione viene utilizzata per il nome della classe che viene applicato allo spazio altrimenti bianco. Per impostazione predefinita, il suo valore è false.

Option - placeholder

Syntax

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

Questa opzione decide se gli elementi ordinabili devono tornare alle loro nuove posizioni utilizzando un'animazione fluida. Per impostazione predefinita, il suo valore èfalse.

Option - revert

Questa opzione decide se gli elementi ordinabili devono tornare alle loro nuove posizioni utilizzando un'animazione fluida. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione viene utilizzata per abilitare lo scorrimento. Se impostato su true, la pagina scorre quando si arriva a un bordo. Per impostazione predefinita, il suo valore ètrue.

Option - scroll

Questa opzione viene utilizzata per abilitare lo scorrimento. Se impostato su true, la pagina scorre quando si arriva a un bordo. Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Questa opzione indica di quanti pixel il mouse deve uscire dall'area visibile per provocare lo scorrimento. Per impostazione predefinita, il suo valore è20. Questa opzione viene utilizzata solo con options.scroll impostato su true.

Option - scrollSensitivity

Questa opzione indica di quanti pixel il mouse deve uscire dall'area visibile per provocare lo scorrimento. Per impostazione predefinita, il suo valore è20. Questa opzione viene utilizzata solo con options.scroll impostato su true.

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 scrollSpeed

Questa opzione indica la velocità di scorrimento del display una volta iniziato lo scorrimento. Per impostazione predefinita, il suo valore è20.

Option - scrollSpeed

Questa opzione indica la velocità di scorrimento del display una volta iniziato lo scorrimento. Per impostazione predefinita, il suo valore è20.

Syntax

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

Questa opzione è una stringa che specifica quale modalità utilizzare per verificare se l'elemento spostato si trova su un altro elemento. Per impostazione predefinita, il suo valore è"intersect".

Option - tolerance

Questa opzione è una stringa che specifica quale modalità utilizzare per verificare se l'elemento spostato si trova su un altro elemento. Per impostazione predefinita, il suo valore è"intersect"I valori possibili sono -

  • intersect - L'articolo si sovrappone all'altro di almeno il 50%.

  • pointer - Il puntatore del mouse si sovrappone all'altro elemento.

Syntax

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

Questa opzione rappresenta z-index per elemento / helper durante l'ordinamento. Per impostazione predefinita, il suo valore è1000.

Option - zIndex

Questa opzione rappresenta Z-index per elemento / helper durante l'ordinamento. Per impostazione predefinita, il suo valore è1000.

Syntax

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

La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità di trascinamento.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità ordinabile, senza passare parametri al file sortable() metodo.

<!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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Riordina i prodotti sopra, usa il mouse per trascinare gli elementi.

Uso delle opzioni Ritardo e distanza

Il seguente esempio dimostra l'utilizzo di tre opzioni (a) delay e (b) distance nella funzione sort di 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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Riordina i prodotti sopra, usa il mouse per trascinare gli elementi. Per prevenire l'ordinamento accidentale per ritardo (tempo) o distanza, abbiamo impostato un numero di millisecondi in cui l'elemento deve essere trascinato prima che l'ordinamento inizi con l' opzione delay . Abbiamo anche impostato una distanza in pixel in cui l'elemento deve essere trascinato prima che l'ordinamento inizi con l' opzione distanza .

Uso del segnaposto

L'esempio seguente mostra l'utilizzo di tre opzioni placeholder nella funzione sort di 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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a trascinare gli elementi per riorganizzarli, mentre trascini gli elementi, il segnaposto (abbiamo usato la classe di evidenziazione per modellare questo spazio) verrà visualizzato in un luogo disponibile.

Utilizzo delle opzioni Connectwith e Droponempty

Il seguente esempio dimostra l'utilizzo di tre opzioni (a) connectWith e (b) dropOnEmpty nella funzione sort di 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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Ordina gli elementi da un List1 a un altro (List2) e viceversa, passando un selettore nell'opzione connectWith . Questo viene fatto raggruppando tutti gli elenchi correlati con una classe CSS, quindi passare quella classe alla funzione ordinabile (ad esempio, connectWith: '# sortable-5, # sortable-6').

Prova a trascinare gli elementi sotto List 3 su List 2 o List 1. Poiché abbiamo impostato l' opzione dropOnEmpty su false , non sarà possibile rilasciare questi elementi.

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

Il metodo ordinabile (action, params) può eseguire un'azione sugli elementi ordinabili, ad esempio per impedire lo spostamento. Ilaction è specificato come una stringa nel primo argomento e, facoltativamente, uno o più params può essere fornito in base all'azione data.

Fondamentalmente, qui le azioni non sono altro che metodi jQuery che possiamo usare sotto forma di stringa.

Sintassi

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

La tabella seguente elenca le azioni per questo metodo:

Sr.No. Azione e descrizione
1 Annulla()

Questa azione annulla l'operazione di ordinamento corrente. Ciò è particolarmente utile all'interno dei gestori per gli eventi di ordinamento ricezione e smistamento. Questo metodo non accetta argomenti.

Action - cancel()

Annulla l'operazione di ordinamento corrente. Ciò è molto utile all'interno dei gestori per gli eventi di ordinamento ricezione e smistamento. Questo metodo non accetta argomenti.

Syntax

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

Questa azione rimuove completamente la funzionalità di selezionabilità. Ciò riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Action - destroy()

Questa azione rimuove completamente la funzionalità di selezionabilità. Ciò riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Syntax

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

Questa azione disabilita la selezionabilità di tutti gli elementi ordinabili nel set avvolto. La selezionabilità degli elementi non viene rimossa e può essere ripristinata chiamando la variante enable di questo metodo. Questo metodo non accetta argomenti.

Action - disable()

Questa azione disabilita la selezionabilità di tutti gli elementi ordinabili nel set avvolto. La selezionabilità degli elementi non viene rimossa e può essere ripristinata chiamando la variante enable di questo metodo. Questo metodo non accetta argomenti.

Syntax

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

Riattiva la selezionabilità su tutti gli elementi ordinabili nel set avvolto la cui selezionabilità è stata disabilitata. Nota che questo metodo non aggiungerà la selezionabilità a nessun elemento non ordinabile. Questo metodo non accetta argomenti.

Action - enable()

Riattiva la selezionabilità su tutti gli elementi ordinabili nel set avvolto la cui selezionabilità è stata disabilitata. Nota che questo metodo non aggiungerà la selezionabilità a nessun elemento non ordinabile. Questo metodo non accetta argomenti.

Syntax

$(".selector").sortable("enable");
5 opzione (optionName)

Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è il nome dell'opzione da ottenere.

Action - option( optionName )

Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è il nome dell'opzione da ottenere.

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 opzione()

Ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni ordinabili correnti. Questo metodo non accetta argomenti.

Action - option()

Ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni ordinabili correnti. Questo metodo non accetta argomenti.

Syntax

$(".selector").sortable("option");
7 opzione (optionName, value)

Questa azione imposta il valore dell'opzione ordinabile associata con optionName specificato . Dove optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione.

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione ordinabile associata con optionName specificato . Dove optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione.

Syntax

$(".selector").sortable("option", "disabled", true);
8 opzione (opzioni)

Imposta una o più opzioni per l'ordinabile. Dove opzioni è una mappa di coppie opzione-valore da impostare.

Action - option( options )

Imposta una o più opzioni per l'ordinabile. Dove opzioni è una mappa di coppie opzione-valore da impostare.

Syntax

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

Questa azione aggiorna l'elenco degli elementi, se necessario. Questo metodo non accetta argomenti. La chiamata a questo metodo causerà il riconoscimento dei nuovi elementi aggiunti all'ordinabile.

Action - refresh()

Questa azione aggiorna l'elenco degli elementi, se necessario. Questo metodo non accetta argomenti. La chiamata a questo metodo causerà il riconoscimento dei nuovi elementi aggiunti all'ordinabile.

Syntax

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

Questo metodo restituisce un array dei valori id degli elementi ordinabili in ordine ordinato. Questo metodo accetta Opzioni come parametro, per personalizzare la serializzazione o l'ordinamento.

Action - toArray( options )

Questo metodo restituisce un array dei valori id degli elementi ordinabili in ordine ordinato. Questo metodo accetta Opzioni come parametro, per personalizzare la serializzazione o l'ordinamento.

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serializzare (opzioni)

Questo metodo restituisce una stringa di query serializzata (sottomettibile tramite Ajax) formata da sortable.

Action - serialize( options )

Questo metodo restituisce una stringa di query serializzata (sottomettibile tramite Ajax) formata da sortable. Funziona per impostazione predefinita guardando l'ID di ogni elemento nel formato "setname_number", e sputa un cancelletto come "setname [] = numero & setname [] = numero".

Syntax

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

Questo metodo viene utilizzato principalmente internamente per aggiornare le informazioni memorizzate nella cache del file sortable. Questo metodo non accetta argomenti.

Action - refreshPositions()

Questo metodo viene utilizzato principalmente internamente per aggiornare le informazioni memorizzate nella cache del file sortable. Questo metodo non accetta argomenti.

Syntax

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

Questo metodo restituisce un oggetto jQuery contenente l'elemento ordinabile. Questo metodo non accetta argomenti.

Action - widget()

Questo metodo restituisce un oggetto jQuery contenente l'elemento ordinabile. Questo metodo non accetta argomenti.

Syntax

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

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso del metodo toArray (opzioni) .

<!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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a ordinare gli elementi, l'ordine degli elementi viene visualizzato in basso. Qui stiamo chiamando $ (this) .sortable ('toArray'). ToString () , che fornirà un elenco di stringhe di tutti gli ID degli elementi, potrebbe sembrare1,2,3,4.

Gestione degli eventi sugli elementi ordinabili

Oltre al metodo ordinabile (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati ​​per un particolare evento. Questi metodi di evento sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 attivare (evento, ui)

Questo evento viene attivato sull'ordinatore quando un'operazione di ordinamento inizia sull'ordinatore connesso.

Event - activate(event, ui)

Questo evento viene attivato sull'ordinatore quando un'operazione di ordinamento inizia sull'ordinatore connesso. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando l'operazione di ordinamento sta per terminare, con l'helper e il riferimento all'elemento segnaposto ancora validi.

Event - beforeStop(event, ui)

Questo evento viene attivato quando l'operazione di ordinamento sta per terminare, con l'helper e il riferimento all'elemento segnaposto ancora validi. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando l'elemento ordinato cambia posizione all'interno del DOM.

Event - change(event, ui)

Questo evento viene attivato quando l'elemento ordinato cambia posizione all'interno del DOM. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando viene creato l'ordinabile.

Event - create(event, ui)

Questo evento viene attivato quando viene creato l'ordinabile. Dove event è di tipo Event e ui è di tipo Object . L'oggetto ui è vuoto ma incluso per coerenza con altri eventi.

Syntax

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

Questo evento viene attivato quando un ordinamento connesso si interrompe, propagato all'ordinatore connesso.

Event - deactivate(event, ui)

Questo evento viene attivato quando un ordinamento connesso si interrompe, propagato all'ordinatore connesso. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando l'elemento di ordinamento viene spostato da un elenco connesso.

Event - out(event, ui)

Questo evento viene attivato quando l'elemento di ordinamento viene spostato da un elenco connesso. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando un elemento di ordinamento si sposta in un elenco connesso.

Event - over(event, ui)

Questo evento viene attivato quando un elemento di ordinamento si sposta in un elenco connesso. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando un elenco connesso ha ricevuto un elemento di ordinamento da un altro elenco.

Event - receive(event, ui)

Questo evento viene attivato quando un elenco connesso ha ricevuto un elemento di ordinamento da un altro elenco. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando l'elemento di ordinamento viene rimosso da un elenco connesso e trascinato in un altro.

Event - remove(event, ui)

Questo evento viene attivato quando l'elemento di ordinamento viene rimosso da un elenco connesso e trascinato in un altro. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene ripetutamente attivato per gli eventi mousemove durante un'operazione di ordinamento.

Event - sort(event, ui)

Questo evento viene ripetutamente attivato per gli eventi mousemove durante un'operazione di ordinamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato all'avvio di un'operazione di ordinamento.

Event - start(event, ui)

Questo evento viene attivato all'avvio di un'operazione di ordinamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato al termine di un'operazione di ordinamento.

Event - stop(event, ui)

Questo evento viene attivato al termine di un'operazione di ordinamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Questo evento viene attivato quando un'operazione di ordinamento si interrompe e la posizione dell'elemento è stata modificata.

Event - update(event, ui)

Questo evento viene attivato quando un'operazione di ordinamento si interrompe e la posizione dell'elemento è stata modificata. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • helper - Un oggetto jQuery che rappresenta l'helper da ordinare.

  • item - Un oggetto jQuery che rappresenta l'elemento trascinato corrente.

  • offset - L'attuale posizione assoluta dell'helper rappresentata come {top, left} ..

  • position - Posizione CSS corrente dell'helper come oggetto {top, left}.

  • originalPosition - La posizione originale dell'elemento rappresentato come {in alto, a sinistra}.

  • sender - L'ordinabile da cui proviene l'articolo se si passa da uno ordinabile a un altro.

  • placeholder - L'oggetto jQuery che rappresenta l'elemento utilizzato come segnaposto.

Syntax

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

Esempio

L'esempio seguente mostra l'utilizzo del metodo dell'evento durante la funzionalità di rilascio. Questo esempio dimostra l'uso di eventi di ricezione , avvio e arresto .

<!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>

Salviamo il codice sopra in un file HTML sortexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a ordinare gli elementi nell'elenco 1, vedrai il messaggio che viene visualizzato all'inizio e alla fine dell'evento. Ora rilascia gli elementi da List 2 a List 1, di nuovo viene visualizzato un messaggio sull'evento di ricezione .