Drag&Drop mit Prototype und Script.aculo.us
Dies ist eine Ergänzung zu meinem Tutorial: Drag & Drop mit Prototype/Script.aculo.us
Wie installiert man Prototype und Script.aculo.us?
Die Library Prototype kann auf prototypejs.org heruntergeladen werden. Alternativ könnt ihr aber auch direkt die ganze Script.aculo.us Library runterladen, die den Prototype Code enthält.
Danach entpackt ihr die Dateien und verschiebt sie in euren Ordner. Auf den jeweiligen Seiten müsst ihr die Dateien dann einbinden:
“javascripts” ersetzt ihr mit dem Namen eures Ordners. Bei mir ist das i.d.R. “src” (source) oder “inc” (include).
Der Scriptaculous-Loader wird die benötigten Elemente der Library automatisch laden, ihr müsst die zusätzlichen Dateien (effects, slider etc.) also nicht noch einmal extra einbinden.
Danach sind die Bibliotheken direkt einsatzbereit.
Was sind Draggables und Droppables?
Draggables sind Elemente, die sich verschieben lassen.
Droppables sind Container, auf die man Draggables schieben kann.
Draggables lassen sich auch unabhängig von Droppables verschieben und bewegen, Droppables sind aber ohne dazugehörige Draggables unsinnig.
Der Code für ein Draggable:
new Draggable('id_of_element',[options]);
Welche Optionen gibt es für Draggables?
| revert | Wenn dieser wert “true” ist, kehrt das Element nach dem loslassen zurück an seinen ursprünglichen Platz |
| snap | Hier werden zwei Werte eingegeben einen für den horizontalen und einen für den vertikalen Wert, den das Objekt mindestens bewegt werden muss. |
| zindex | Der css-z-index des Elements. Standard: 1000 |
| constraint | Ist normalerweise nicht gesetzt. Trägt man hier horizontal oder vertical ein, so kann das Element nur noch horizontal oder vertikal bewegt werden. |
| ghosting | Standard: false. True: Während ich das Draggable verschiebe, wird weiterhin eine Kopie am Ursprungsort angezeigt. |
| starteffect | Standardwert: Effect.Opacity. Dieser Effekt wird auf das Draggable angewendet, wenn ich beginne es zu bewegen |
| reverteffect | Standardwert: Effect.Move. Dieser Effekt wird auf das Draggable angewendet, wenn ich es loslasse und es zum ursprünglichen Ort zurückkehrt. |
| endeffect | Standardwert: Effect.Opacity. Dieser Effekt wird auf das Draggable angewendet, wenn der Dragvorgang abgeschlossen wird. |
Beispiele:
Welche Optionen gibt es für Droppables?
Die Syntax eines Droppables ist ebenso wie die eines Draggables.
Droppables.add('id_of_element',[options]);
| accept | Ist dieser Wert definiert, akzeptiert das Droppable nur Draggabels, die mindestens eine der hier aufgeführten CSS Klassen beinhalten |
| containment | Das Droppable akzeptiert nur Draggables, die in eine der hier definierten Elemente eingeschlossen sind. |
| hoverclass | Hier kann man eine CSS-Klasse angeben, die dem Droppable zugeteilt wird, wenn ein akzeptiertes Draggable darüber geschoben wird |
| overlap | Mögliche Werte: horizontal oder vertical. Das Droppable reagiert nur, wenn das Draggable horrizontal bzw vertical zu mindestens 50% auf das Droppable geschoben wurde. |
Beispiele:
Wie ihr sicherlich gemerkt habt, sind auf dieser Seite keine Kommentare möglich. Wenn ihr Fragen habt, stellt sie doch bitte in der Kommentarfunktion des jeweiligen Artikels. Danke!
Weiterführendes:
Ich bin Chaim Dönnewald und komme aus Dortmund. Ich beschäftige mich viel mit SEO, Ajax und PHP.
