script.aculo.us - Drag & Drop

Die beliebteste Funktion der Web 2.0-Oberfläche ist die Drag & Drop-Funktion. Glücklicherweise verfügt script.aculo.us über eine inhärente Funktion zur Unterstützung von Drag & Drop.

Um die Drag-Funktionen von script.aculo.us nutzen zu können, müssen Sie die laden dragdrop Modul, das auch die benötigt effectsModul. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:

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

Dinge herumschleppen

Es ist sehr einfach, ein Element mit script.aculo.us ziehbar zu machen. Dazu muss eine Instanz der Draggable- Klasse erstellt und das Element identifiziert werden, das ziehbar gemacht werden soll.

Draggable Syntax

new Draggable( element, options );

Der erste Parameter für den Konstruktor identifiziert das Element, das entweder als ID des Elements oder als Verweis auf das Element ziehbar gemacht werden soll. Der zweite Parameter gibt optionale Informationen zum Verhalten des ziehbaren Elements an.

Ziehbare Optionen

Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.

Möglichkeit Beschreibung Beispiele
zurückkehren Wenn true festgelegt ist , kehrt das Element am Ende des Ziehens an seine ursprüngliche Position zurück. Gibt auch an, ob der Rückruf für den Rückwirkungseffekt aufgerufen wird, wenn der Ziehvorgang beendet wird. Der Standardwert ist false .

Beispiel

einrasten Wird verwendet, um zu bewirken, dass ein Draggable an einem Raster einrastet oder seine Bewegung einschränkt. Wenn false (Standard), tritt kein Einrasten oder Einschränken auf.
  • Wenn ihm eine Ganzzahl x zugewiesen ist, wird das Draggable an einem Raster von x Pixeln ausgerichtet.

  • Wenn ein Array [x, y] vorhanden ist, wird das horizontale Ziehen an einem Raster von x Pixeln und das vertikale Ziehen an y Pixeln ausgerichtet.

  • Es kann sich auch um eine Funktion handeln, die der Funktion (x, y, ziehbar) entspricht und ein Array [x, y] zurückgibt.

Beispiel

Zindex Gibt den CSS-Z-Index an, der während eines Ziehvorgangs auf das Element angewendet werden soll. Standardmäßig ist der Z-Index des Elements beim Ziehen auf 1000 eingestellt.

Beispiel

Geisterbilder Boolescher Wert, der bestimmt, ob das Draggable zum Ziehen geklont werden soll, wobei das Original an Ort und Stelle bleibt, bis der Klon gelöscht wird. Der Standardwert ist false .

Beispiel

Zwang Eine Zeichenfolge, mit der die ziehbaren Richtungen entweder horizontal oder vertikal begrenzt werden . Der Standardwert ist null, was freie Bewegung bedeutet.

Beispiel

Griff Gibt ein Element an, das als Handle zum Starten des Ziehvorgangs verwendet werden soll. Standardmäßig ist ein Element ein eigenes Handle.

Beispiel

Starteffekt Ein Effekt, der beim Ziehen des Elements aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 0,2 geändert.

Beispiel

Reverteffekt Ein Effekt, der auf das Element aufgerufen wird, wenn das Ziehen zurückgesetzt wird. Standardmäßig wird eine glatte Folie an die ursprüngliche Position des Elements verschoben . Wird nur aufgerufen, wenn das Zurücksetzen wahr ist.

Beispiel

Endeffekt Ein Effekt, der beim Ziehen auf das Element aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 1,0 geändert.

Beispiel

Rückrufoptionen

Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:

Funktion Beschreibung Beispiele
am Start Wird aufgerufen, wenn ein Ziehen eingeleitet wird.

Beispiel

onDrag Wird wiederholt aufgerufen, wenn sich eine Maus bewegt, wenn sich die Mausposition gegenüber dem vorherigen Anruf ändert.

Beispiel

Veränderung Wird genauso wie onDrag aufgerufen (dies ist der bevorzugte Rückruf).

Beispiel

am Ende Wird aufgerufen, wenn ein Drag beendet wird.

Beispiel

Mit Ausnahme des Rückrufs "Ändern" akzeptiert jeder dieser Rückrufe zwei Parameter: das Draggable-Objekt und das Mausereignisobjekt.

Beispiel zum Ziehen

Hier definieren wir 5 Elemente, die ziehbar gemacht werden: drei <div> -Elemente, ein <img> -Element und ein <span> -Element. Der Zweck der drei verschiedenen <div> -Elemente besteht darin, zu demonstrieren, dass das Ziehverhalten unabhängig davon, ob ein Element mit einer Positionierungsregel von statisch (Standard), relativ oder absolut beginnt, nicht beeinflusst wird.

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Ziehen von gezogenen Dingen

Ein Element wird durch einen Aufruf der add () -Methode in einem Namespace namens Droppables in ein Drop-Ziel konvertiert .

Der Droppables-Namespace verfügt über zwei wichtige Methoden: add () zum Erstellen eines Drop-Ziels und remove () zum Entfernen eines Drop-Ziels.

Syntax

Hier ist die Syntax der add () -Methode zum Erstellen eines Drop-Ziels. Die add () -Methode erstellt ein Drop-Ziel aus dem als ersten Parameter übergebenen Element, wobei die Optionen im als zweiten übergebenen Hash verwendet werden.

Droppables.add( element, options );

Die Syntax für remove () ist noch einfacher. Die remove () -Methode entfernt das Drop-Target-Verhalten aus dem übergebenen Element.

Droppables.remove(element);

Optionen

Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.

Möglichkeit Beschreibung Beispiele
Schwebeklasse Der Name einer CSS-Klasse, die dem Element hinzugefügt wird, während das Droppable aktiv ist (über dem ein akzeptables Draggable schwebt). Der Standardwert ist null.

Beispiel

Akzeptieren Eine Zeichenfolge oder ein Array von Zeichenfolgen, die CSS-Klassen beschreiben. Das Droppable akzeptiert nur Draggables, die eine oder mehrere dieser CSS-Klassen haben.

Beispiel

Eindämmung Gibt ein Element oder ein Array von Elementen an, das ein übergeordnetes Element eines ziehbaren Elements sein muss, damit es vom Ablageziel akzeptiert wird. Standardmäßig werden keine Containment-Einschränkungen angewendet.

Beispiel

Überlappung Bei Einstellung auf "horizontal" oder "vertikal" reagiert das Droppable nur dann auf ein Draggable, wenn es sich in der angegebenen Richtung um mehr als 50% überlappt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert.  
gierig Wenn true (Standardeinstellung), werden keine schwebenden Dateien mehr angezeigt. Unter der Drag-Datei wird nicht gesucht.

Beispiel

Rückrufoptionen

Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:

Funktion Beschreibung Beispiele
onHover Gibt eine Rückruffunktion an, die aktiviert wird, wenn ein geeignetes ziehbares Element über dem Ablageziel schwebt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert.  
onDrop Gibt eine Rückruffunktion an, die aufgerufen wird, wenn ein geeignetes ziehbares Element auf das Ablageziel gelegt wird.

Beispiel

Beispiel

Hier ähnelt der erste Teil dieses Beispiels unserem vorherigen Beispiel, außer dass wir die praktische Funktion $ A () von Prototype verwendet haben, um eine Knotenliste aller <img> -Elemente im Element mit der ID von Draggables in ein Array zu konvertieren .

<html>
   <head>
      <title>Drag and Drop 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() {
            // Make all the images draggables from draggables division.
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) { new Draggable(item, {revert: true, ghosting: true}); }); Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem}); // Set drop area by default non cleared. $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
			
         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
				
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
			
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
			
         .hoverActive {
            background-color: #ffffcc;
         }
			
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis: