script.aculo.us - Elemente sortieren

Oft müssen Sie dem Benutzer die Möglichkeit geben, Elemente (z. B. Elemente in einer Liste) durch Ziehen neu anzuordnen.

Ohne Drag & Drop kann die Neuordnung ein Albtraum sein, aber script.aculo.us bietet über die Sortable- Klasse sofort erweiterte Unterstützung für die Neuordnung . Das Element, das sortierbar werden soll, wird an die Methode create () im Namespace Sortable übergeben.

Eine Sortierbare Datei besteht aus Elementelementen in einem Containerelement. Wenn Sie eine neue Sortierbarkeit erstellen, werden die entsprechenden Draggables und Droppables erstellt .

Um die sortierbaren Funktionen von script.aculo.us nutzen zu können, müssen Sie die laden dragdrop Modul, das auch die benötigt effectsModul. Ihre minimale Belastung für script.aculo.us sieht also so aus:

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

Sortierbare Syntax

Hier ist die Syntax der Methode create () zum Erstellen eines sortierbaren Elements. Die create () -Methode nimmt die ID eines Containerelements und sortiert sie basierend auf den übergebenen Optionen.

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

Verwenden Sie Sortable.destroy , um alle Ereignishandler und Verweise auf eine von Sortable.create erstellte Sortable vollständig zu entfernen.

NOTE- Ein Aufruf von Sortable.create ruft implizit Sortable.destroy auf, wenn das referenzierte Element bereits Sortable war. Hier ist die einfache Syntax zum Aufrufen der Zerstörungsfunktion.

Sortable.destroy( element );

Sortierbare Optionen

Sie können beim Erstellen Ihres sortierbaren Objekts eine oder mehrere der folgenden Optionen verwenden.

Sr.Nr. Option & Beschreibung
1

tag

Gibt den Typ der Elemente im sortierbaren Container an, die per Drag & Drop sortiert werden sollen. Der Standardwert ist 'li'.
2

only

Gibt einen CSS-Klassennamen oder ein Array von Klassennamen an, über die ein ziehbares Element verfügen muss, um vom Ablageziel akzeptiert zu werden. Dies ähnelt der Akzeptanzoption von Draggable. Standardmäßig werden keine Einschränkungen für Klassennamen angewendet.
3

overlap

Eine von falsch, horizontal oder vertikal . Steuert den Punkt, an dem eine Neuordnung ausgelöst wird. Der Standardwert ist vertikal .
4

constraint

Eine von falsch, horizontal oder vertikal . Beschränkt die Bewegung von gezogenen sortierbaren Elementen. Der Standardwert ist vertikal .
5

containment

Ermöglicht das Ziehen und Ablegen zwischen Sortierelementen. Nimmt ein Array von Elementen oder Element-IDs. Wichtiger Hinweis: Um sicherzustellen, dass das Ziehen in beide Richtungen zwischen Containern möglich ist, platzieren Sie alle Sortable.create-Aufrufe nach den Containerelementen.
6

handle

Entspricht der gleichnamigen Draggable-Option, die ein Element angibt, das zum Initiieren von Drag-Vorgängen verwendet werden soll. Standardmäßig ist jedes Element ein eigenes Handle.
7

hoverclass

Gibt einen CSS-Klassennamen an, der auf nicht gezogene sortierbare Elemente angewendet werden soll, wenn ein gezogenes Element über sie hinweggeht. Standardmäßig wird kein CSS-Klassenname angewendet.
8

ghosting

Ähnlich wie bei der gleichnamigen Option "Draggable" bewirkt diese Option, dass das ursprüngliche Element eines Ziehvorgangs an Ort und Stelle bleibt, während eine halbtransparente Kopie des Elements zusammen mit dem Mauszeiger verschoben wird. Der Standardwert ist false . Diese Option funktioniert nicht mit IE.
9

dropOnEmpty

Wenn true, können sortierbare Elemente in eine leere Liste eingefügt werden. Der Standardwert ist false .
10

scroll

Wenn der sortierbare Container aufgrund der Einstellung des CSS-Überlaufattributs über eine Bildlaufleiste verfügt, ermöglicht diese Option das automatische Scrollen der Liste über die sichtbaren Elemente hinaus. Der Standardwert ist false .
12

scrollSensitivity

Wenn das Scrollen aktiviert ist, wird der Punkt angepasst, an dem das Scrollen ausgelöst wird. Der Standardwert ist 20.
13

scrollSpeed

Wenn das Scrollen aktiviert ist, wird die Bildlaufgeschwindigkeit angepasst. Der Standardwert ist 15.
14

tree

Wenn true, wird das Sortieren mit Unterelementen innerhalb des sortierbaren Elements aktiviert. Der Standardwert ist false.
15

treeTag

Wenn die Baumoption aktiviert ist, gibt sie den Containerelementtyp des Unterelements an, dessen untergeordnete Elemente am sortierbaren Verhalten beteiligt sind. Der Standardwert ist 'ul'.

Im Parameter options können Sie folgende Rückrufe bereitstellen:

Sr.Nr. Option & Beschreibung
1

onChange

Eine Funktion, die aufgerufen wird, wenn sich die Sortierreihenfolge beim Ziehen ändert. Beim Ziehen von einer Sortierbarkeit zur anderen wird der Rückruf bei jeder Sortierbarkeit einmal aufgerufen. Ruft das betroffene Element als Parameter ab.
2

onUpdate

Eine Funktion, die beim Beenden einer Ziehoperation aufgerufen wird, die zu einer Änderung der Elementreihenfolge führt.

Sortierbeispiele

Es wurde überprüft, ob diese Demo in IE 6.0 funktioniert. Es funktioniert auch in der neuesten Version von 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>

Verwenden Sie unseren Online-Compiler, um den Code mit den verschiedenen in der obigen Tabelle beschriebenen Optionen besser zu verstehen.

Dies führt zu folgendem Ergebnis:

Beachten Sie die Verwendung des Tags: 'li' . Ebenso können Sie die folgende Liste der in <div> verfügbaren Bilder sortieren -

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

Dies führt zu folgendem Ergebnis:

Serialisierung der sortierbaren Elemente

Das Sortable-Objekt bietet auch eine Funktion Sortable.serialize (), um die Sortable in einem Format zu serialisieren, das für HTTP-GET- oder POST-Anforderungen geeignet ist. Dies kann verwendet werden, um die Reihenfolge der Sortierbaren über einen Ajax-Aufruf zu senden.

Syntax

Sortable.serialize(element, options);

Optionen

Sie können beim Erstellen Ihres sortierbaren Objekts eine oder mehrere der folgenden Optionen verwenden.

Sr.Nr. Option & Beschreibung
1

tag

Legt die Art des Tags fest, das serialisiert wird. Dies ähnelt dem, was in Sortable.create verwendet wird .
2

name

Legt den Namen des Schlüssels fest, der zum Erstellen der Schlüssel / Wert-Paare für die Serialisierung im HTTP-GET / POST-Format verwendet wird. Wenn der Name also xyz wäre, würde die Abfragezeichenfolge wie folgt aussehen:

xyz [] = Wert1 & xyz [] = Wert2 & xyz [] = Wert3

Wo die Werte von den untergeordneten Elementen in der Reihenfolge abgeleitet werden, in der sie im Container angezeigt werden.

Beispiele serialisieren

In diesem Beispiel gibt die Ausgabe der Serialisierung nur die Zahlen nach dem Unterstrich in den Listenelement-IDs an.

Um dies zu versuchen, belassen Sie die Listen in ihrer ursprünglichen Reihenfolge und drücken Sie die Taste, um die Serialisierung der Listen anzuzeigen. Ordnen Sie nun einige Elemente neu an und klicken Sie erneut auf die Schaltfläche.

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

Dies führt zu folgendem Ergebnis:

Elemente zwischen Sortierelementen verschieben

Das folgende Beispiel zeigt, wie Elemente von einer Liste in eine andere Liste verschoben werden.

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

Beachten Sie, dass die Containment- Option für jeden Container beide Container als Containment-Elemente auflistet. Auf diese Weise haben wir ermöglicht, dass die untergeordneten Elemente im Kontext ihres übergeordneten Elements sortiert werden. Außerdem können sie zwischen den beiden Containern verschoben werden.

Wir setzen dropOnEmpty für beide Listen auf true. Um zu sehen, wie sich diese Option auf diese Liste auswirkt, verschieben Sie alle Elemente von einer Liste in eine andere, sodass eine Liste leer ist. Sie werden feststellen, dass es erlaubt ist, Elemente auf eine leere Liste zu setzen.

Dies führt zu folgendem Ergebnis:

Bindung an Ajax

Natürlich ist onUpdate ein Hauptkandidat für das Auslösen von Ajax-Benachrichtigungen an den Server, beispielsweise wenn der Benutzer eine Aufgabenliste oder einen anderen Datensatz neu anordnet. Die Kombination Ajax.Request und Sortable.serialize macht Live - Persistenz einfach genug -

<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 erstellt eine Zeichenfolge wie: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, wobei die Zahlen die Bezeichner der Listenelement-IDs nach dem Unterstrich sind.

Jetzt müssen wir file.php codieren , wodurch die veröffentlichten Daten als parse_str ($ _ POST ['data']) analysiert werden . Mit diesen sortierten Daten können Sie alles tun, was Sie wollen.

Um mehr über AJAX zu erfahren, lesen Sie bitte unser einfaches Ajax-Tutorial .

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