script.aculo.us - Ordinamento degli elementi

Molte volte, è necessario fornire all'utente la possibilità di riordinare gli elementi (come gli elementi in un elenco) trascinandoli.

Senza drag and drop, il riordino può essere un incubo, ma script.aculo.us fornisce un supporto di riordino esteso fuori dagli schemi attraverso la classe Sortable . L'elemento da diventare Sortable viene passato al metodo create () nello spazio dei nomi Sortable.

Un Ordinabile è costituito da elementi articolo in un elemento contenitore. Quando crei un nuovo Ordinabile, si occupa della creazione dei corrispondenti Trascinabili e Droppable .

Per utilizzare le funzionalità Sortable di script.aculo.us, dovrai caricare il file dragdrop modulo, che richiede anche il effectsmodulo. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Sintassi ordinabile

Ecco la sintassi del metodo create () per creare un elemento ordinabile. Il metodo create () prende l' id di un elemento contenitore e lo ordina in base alle opzioni passate.

Sortable.create('id_of_container',[options]);

Utilizzare Sortable.destroy per rimuovere completamente tutti i gestori di eventi e i riferimenti a un oggetto Sortable creato da Sortable.create.

NOTE- Una chiamata a Sortable.create, chiama implicitamente Sortable.destroy se l'elemento a cui si fa riferimento era già un Sortable. Ecco la semplice sintassi per chiamare la funzione di distruzione.

Sortable.destroy( element );

Opzioni ordinabili

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto ordinabile.

Suor n Opzione e descrizione
1

tag

Specifica il tipo di elementi all'interno del contenitore ordinabile che devono essere ordinabili tramite trascinamento. Il valore predefinito è "li".
2

only

Specifica un nome di classe CSS, o un array di nomi di classe, che un elemento trascinabile deve possedere per essere accettato dalla destinazione di rilascio. Questo è simile alla accetta possibilità di Draggable. Per impostazione predefinita, non vengono applicati vincoli al nome della classe.
3

overlap

Uno di falso, orizzontale o verticale . Controlla il punto in cui viene attivato un riordino. Il valore predefinito è verticale .
4

constraint

Uno di falso, orizzontale o verticale . Limita il movimento degli elementi ordinabili trascinati. Il valore predefinito è verticale .
5

containment

Consente di trascinare e rilasciare tra i Sortables. Accetta un array di elementi o id elemento. Nota importante: per garantire che sia possibile il trascinamento bidirezionale tra i contenitori, inserire tutte le chiamate Sortable.create dopo gli elementi del contenitore.
6

handle

Uguale all'opzione Trascinabile con lo stesso nome, che specifica un elemento da utilizzare per avviare le operazioni di trascinamento. Per impostazione predefinita, ogni elemento è il proprio handle.
7

hoverclass

Specifica un nome di classe CSS da applicare agli elementi ordinabili non trascinati quando un elemento trascinato passa su di essi. Per impostazione predefinita, non viene applicato alcun nome di classe CSS.
8

ghosting

Simile all'opzione Trascinabile con lo stesso nome, se true, questa opzione fa sì che l'elemento originale di un'operazione di trascinamento rimanga in posizione mentre una copia semitrasparente dell'elemento viene spostata insieme al puntatore del mouse. Il valore predefinito è false . Questa opzione non funziona con IE.
9

dropOnEmpty

Se true, consente di rilasciare elementi ordinabili in un elenco vuoto. Il valore predefinito è false .
10

scroll

Se il contenitore ordinabile possiede una barra di scorrimento a causa dell'impostazione dell'attributo CSS overflow, questa opzione abilita lo scorrimento automatico dell'elenco oltre gli elementi visibili. Il valore predefinito è false .
12

scrollSensitivity

Quando lo scorrimento è abilitato, regola il punto in cui lo scorrimento viene attivato. Il valore predefinito è 20.
13

scrollSpeed

Quando lo scorrimento è abilitato, regola la velocità di scorrimento. Il valore predefinito è 15.
14

tree

Se true, abilita l'ordinamento con sottoelementi all'interno dell'elemento ordinabile. Il valore predefinito è false.
15

treeTag

Se l'opzione albero è abilitata, specifica il tipo di elemento contenitore del sottoelemento i cui figli prendono parte al comportamento ordinabile. Il valore predefinito è "ul".

È possibile fornire i seguenti callback nel parametro options:

Suor n Opzione e descrizione
1

onChange

Una funzione che verrà chiamata ogni volta che l'ordinamento cambia durante il trascinamento. Quando si trascina da un Ordinabile a un altro, la richiamata viene chiamata una volta su ogni Ordinabile. Ottiene l'elemento interessato come parametro.
2

onUpdate

Una funzione che verrà chiamata al termine di un'operazione di trascinamento che si traduce in una modifica nell'ordine degli elementi.

Esempi di ordinamento

Questa demo è stata verificata per funzionare in IE 6.0. Funziona anche nell'ultima versione di Firefox.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

Usa il nostro compilatore online per una migliore comprensione del codice con diverse opzioni discusse nella tabella sopra.

Questo produrrà il seguente risultato:

Nota l'utilizzo del tag: "li" . Allo stesso modo, puoi ordinare il seguente elenco di immagini disponibili in <div> -

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Serializzazione degli elementi ordinabili

L'oggetto Sortable fornisce anche una funzione Sortable.serialize () per serializzare il Sortable in un formato adatto alle richieste HTTP GET o POST. Questo può essere utilizzato per inviare l'ordine dell'ordinabile tramite una chiamata Ajax.

Sintassi

Sortable.serialize(element, options);

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto ordinabile.

Suor n Opzione e descrizione
1

tag

Imposta il tipo di tag che verrà serializzato. Sarà simile a ciò che viene utilizzato in Sortable.create .
2

name

Imposta il nome della chiave che verrà utilizzata per creare le coppie chiave / valore per la serializzazione in formato HTTP GET / POST. Quindi, se il nome fosse xyz, la stringa di query sarebbe simile a -

xyz [] = valore1 & xyz [] = valore2 & xyz [] = valore3

Dove i valori sono derivati ​​dagli elementi figlio nell'ordine in cui appaiono all'interno del contenitore.

Serializza esempi

In questo esempio, l'output della serializzazione fornirà solo i numeri dopo il carattere di sottolineatura negli ID degli elementi dell'elenco.

Per provare, lasciare gli elenchi nell'ordine originale, premere il pulsante per visualizzare la serializzazione degli elenchi. Ora riordina alcuni elementi e fai di nuovo clic sul pulsante.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

Questo produrrà il seguente risultato:

Spostamento di oggetti tra i vari articoli

L'esempio seguente mostra come spostare gli elementi da un elenco a un altro elenco.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

Notare che l' opzione di contenimento per ogni contenitore elenca entrambi i contenitori come elementi di contenimento. In questo modo, abbiamo abilitato l'ordinamento degli elementi figlio nel contesto del loro genitore; Consente inoltre di spostarli tra i due contenitori.

Abbiamo impostato dropOnEmpty su true per entrambe le liste. Per vedere l'effetto che questa opzione ha su quell'elenco, sposta tutti gli elementi da un elenco all'altro in modo che un elenco sia vuoto. Scoprirai che consente di rilasciare elementi in un elenco vuoto.

Questo produrrà il seguente risultato:

Legame con Ajax

Ovviamente, onUpdate è un ottimo candidato per l'attivazione delle notifiche Ajax al server, ad esempio quando l'utente riordina una lista di cose da fare o qualche altro set di dati. La combinazione di Ajax.Request e Sortable.serialize rende la persistenza live abbastanza semplice -

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize crea una stringa come: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, dove i numeri sono le parti identificative degli ID degli elementi della lista dopo il trattino basso.

Ora abbiamo bisogno di codificare file.php , che analizzerà i dati inviati come parse_str ($ _ POST ['data']); e puoi fare tutto ciò che vuoi con questi dati ordinati.

Per saperne di più su AJAX, segui il nostro semplice tutorial Ajax .

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved