Ajax-Tutorial: Drag & Drop mit Prototype/Script.aculo.us ganz einfach

Achtung: Dies ist ein ausführliches Tutorial. Wenn du auf der Suche nach einer Übersicht mit Beispielen bist empfehle ich dir: Drag & Drop mit Prototype und Script.aculo.us

Heute habe ich verzweifelt nach einem ganz einfachen Weg gesucht um ein Drag & Drop zu programmieren, für ein Widgetscript, das ihr in einem meiner Projekte in ein paar Wochen finden werdet.

Nach dem nich erst mal nur nach „Prototype Drag & Drop“ gesucht habe und trotz gründlicher Recherche nichts gefunden habe was mir 100% weitergeholfen hat, bin ich durch einen kleinen Denkanstoss (Prototype ist soetwas wie eine ideale Lib für LibEntwickler – Drag & Drops lassen sich deswegen nur schwierig allein mit Prototype realisieren), habe ich mich entschieden mein Drag & Drop mit Script.aculo.us
zu realisieren.

Leider fand ich die offizielle Webseite von Script.aculo.us immer schon etwas „schwierig“ (die von Prototype im übrigen auch) und suchte deswegen ziemlich lang. Auch über Google habe ich so schnell keine einfache (!) Lösung gefunden.
Wichtig war mir, dass es einfach um eine HTML + Ajax Lösung ging, den PHP-Code dazu wollte ich später selbst basteln. Leider hab ich überwiegend Tutorials gefunden, wo das Drag&Drop Script in eine größere Lösung eingebaut war. Beispielsweise Einkaufswagen, für die man zur Realisierung neben Ajax zu Ruby on Rails gegriffen hatte oder Objekt-Orientierte-PHP Lösungen für einen Onlineshop mit Drag&Drop.

Nach ein paar Klicks bin ich auf der Script.aculo.us Page fündig geworden und möchte euch meine Erkenntnis in einem kurzen Tutorial vorstellen.

Zum Tutorial ist noch zu sagen, dass derjenige, der schon Grundwissen in Ajax hat die grauen Texte überspringen darf, diese sind Basiswissen.

1. Man unterscheidet draggables und droppables
   1. Draggables sind die „Bausteine, die sich verschieben lassen.
   2. Droppables sind soetwas wie Container, auf die man etwas schieben kann.
2. Sowohl die Draggables als auch die Droppables haben verschiedene Optionen, die ihr auf der Script.aculo.us Website nachlesen könnt (die jeweiligen Begriffe sind verlinkt)

Merke: Draggables lassen sich auch von Droppables unabhängig bewegen, aber Droppables sind ohne Draggables etwas „unsinnvoll“ !

Wie bastel ich mir jetzt ein Draggable?

new Draggable('id_of_element',[options]);

Das allein bringt uns natürlich garnichts und da viele meiner Leser bestimmt die Lösung schon schön vorgekaut haben möchtet, gibt es diese jetzt auch.

<div id=”bewegmich“>Beweg mich </div>

<script type=”text/javascript”>

new Draggable(‘bewegmich’,{revert: true});

</script>

Dazu muss man noch sagen, dass man vorher die Prototype-Bibliothek sowie die Script.aculo.us Bibliothek runterladen und einbinden muss. Für alle, die davon noch garkeine Ahnung haben:

Prototype: http://www.prototypejs.org/

Script.aculo.us: http://script.aculo.us/

Ganz einfach einzubinden:

<script type=”text/javascript” src=”inc/prototype.js”></script>
<script type=”text/javascript” src=”inc/scriptaculous.js”></script>

Inc, müsste man in dem Fall natürlich durch das Verzeichnis ersetzen, in dem man die Bibliotheken abgelegt hat. Bei mir ist das standardmässig „inc“ (inc = include).

Ich erzeuge also zuerst einen Div-Container, den kann ich dann mit CSS später noch formatieren indem ich einfach mit meinem CSS-Code auf die ID zurückgreife (IDs die vom Javascript verwendet werden sind die selben wie die CSS IDs, deswegen ist es auch so wichtig, dass man IDs nur einmal benutzt. Will man mehrere Objekten die selbe Formatierung verpassen nimmt man Klassen.)

Dann beginne ich mit meinem Ajax Code. Ich erzeuge ein neues Draggable, dieses soll der Div-Container mit der ID „bewegmich“ sein. Das allein reicht, um mein Draggable benutzen zu können. Aber ich gebe zusätzlich noch eine Option an.

Revert: true bedeutet, dass das Draggable beim loslassen an seine ursprüngliche Stelle zurück wandert. Standardmässig steht diese Option auf False. Natürlich kann ich noch andere Optionen angeben. Optionen werden jeweils mit Kommas voneinander getrennt innerhalb der geschweiften Klammern, schliesst man diese „Optionsbefehle“nicht mit einem Semikolon ab. Also nicht {option1 : true; option2 : false; } und auch nicht {option1 : true, option2 : false; } sondern {option1: true, option2. false }! Als Zuweisungsoperator dient hier NICHT das Gleichzeichen, sondern der Doppelpunkt.

Eine Auflistung aller Optionen findet ihr hier.

Nun zu Droppables:

Damit ich meine Draggables auch irgendwo drauf ziehen kann um etwas zu „erreichen“ brauche ich nun ein Droppable.

Droppables.add('id_of_element',[options]);

Also zum Beispiel:

<div id=”dropp“></div>
Droppables.add(‘dropp‘,{onDrop: function(element) { Element.hide($(element)); new Ajax.Updater(“ausfuehren”,”ajax/tuetwas.php?drag=”+element.id+”&platz=1″,{method: ‘get’, evalScripts: true}); }, hoverclass: ‘hclass’ });

Das ist hoffentlich jetzt nicht etwas viel auf einmal. Ich versuche es mal zu strukturieren:

1. Ich habe einen Div-Container, hier soll mein Draggable draufgezogen werden. Dieser Container hat die ID “dropp”. Ich kann ihn per CSS formatieren (Größe angeben, Position, Rahmen, Hintergrundfarbe usw…)
2. Ich gebe mehere Funktion und trenne sie durch Kommas.
   1. onDrop: Wenn jemand ein Draggable drauf doppt (fallen lässt/darauf zieht und loslässt) wird die folgende Funktion aufgerufen: function(element) { Element.hide($(element)); new Ajax.Updater(“ausfuehren”,”ajax/tuetwas.php?drag=”+element.id,{method: ‘get’, evalScripts: true}); }
      
      1. Das Element „element“ -> also das Draggable, das auf das Droppable gezogen wurde, wird unsichtbar gemacht. Es verschwindet also. (Das habe ich gemacht, weil in meiner Applikation die Draggables nur einmal auf ein Droppable gezogen werden können.)
      2. Es wird ein Ajax.Updater eingeleitet. Er läd in der <div>-„ausfuehren“ (nicht im Codeausschnitt enthalten) die Datei tuetwas.php aus dem Ajax-Ordner. Er übergibt an sie den Parameter Drag mit dem Wert element.id. Element.id ist die ID des elements (element ist eine Variable mit dem Punkt kann ich auf einen bestimmten „Wert“ einer Variable zugreifen). Dann benutzt der Ajax.Updater noch zwei Optionen. Einmal die Methode get um die Daten zu laden und einmal ist evalScripts auf true gesetzt, mit dieser Option kann ich auch in der geladenen Datei Prototype Code verwenden.
3. hoverclass setze ich auf den Wert hclass. hclass ist eine Klasse, die ich im CSS-Code verwende sie hat die Eigenschaften, die das Droppable annehmen soll, wenn ein Draggable sozusagen „hover“ ist. Beispiel: Normalerweise hat mein Droppable einen weissen Hintergrund und einen schwarzen 1px dicken Rahmen. Nun möchte ich, dass mein Droppable die Hintergrundfarbe orange annimmt, wenn jemand ein Draggable drauf zieht (aber noch nicht los lässt). Dann speicher ich diesen Wert in einer CSS Klasse und nenne sie in dem Fall hclass und setze dann die hoverclass auf diese CSS-Klasse.
   

Ok, ich hoffe es ist klar geworden wie das mit Drag&Drop funktioniert. Mit meiner PHP-Datei kann ich dann zB diese Veränderung in meiner Datenbank speichern oder sie per PHP auswerten. Auf die ID des Draggables kann im im PHP Code mit $_GET['drag'] zugreifen, weil wir ja über die Methode get den Parameter drag übergeben haben.

Beispiele hier: Drag & Drop mit Prototype und Script.aculo.us

Vielleicht ist das auch interessant für dich:

• GlassBox
• Ein- und Ausblenden mit Ajax wie Lightbox mit Prototype&Script.aculo.us
• wp_title modifizieren
• Werbung auf den Wordpress Kategorieseiten
• Wordpress Popular Posts anzeigen ohne Plugin
• Spaß mit Twitter ohne API
• Wordpress Templates: Kategorie-Description anzeigen
• Einzigartige Layouts