Die Drag and Drop Komponente der Yahoo! User Interface Library
Eine kleine Einführung in die Drag and Drop Komponente der Yahoo! User Interface (UI) Library.
In diesem kleinen Tutorial soll gezeigt werden wie man einem HTML Block-Element mit Hilfe der Yahoo! User Interface Library sehr einfach eine Drag und Drop Fähigkeit geben kann. Als zweites Beispiel soll ein Fenster mit Kopf und Content Bereich erstellt werden, dass sich nur durch den Fensterkopf bewegen lässt. Die drei implementierten Beispiele können auch direkt von der Übersichtsseite aus aufgerufen werden.
Gliederrung:
Generelles Vorgehen mit der Yahoo! User Interface Library
Yahoo! liefert in seinem Download neben den Javascript Dateien viele Beispiele aus denen hervorgeht wie die UI Library zu nutzen ist. Daher wird an dieser Stelle nicht auf jedes Detail eingegangen sondern nur das notwendigste erläutert. Zudem liefert Yahoo! zu der UI LIbrary eine JSDoc Dokumentation mit, in der alle Methoden noch einmal dokumentiert sind.
Generell muss immer die YAHOO.js an erster Stelle inkludiert werden um den globalen Namespace für die YAHOO! UI Library bekannt zu machen. Ist diese nicht nicht an erster Stelle oder überhaupt nicht inkludiert werden die Klassen von Yahoo! nicht gefunden. An dieser Stelle sei kurz erwähnt, dass die Yahoo! UI Library Namespaces unterstützt und man somit Namen für Klassen oder Funktionen unter verschiedenen Namespaces mehrfach verwenden kann.
Als weitere Grundelemente müssen die Yahoo! Javascript Dateien für das Event Handling und für die Dom Manupulationen inkludiert werden. Es wird in diesem Artikel nur kurz auf das Event Handling aber nicht weiter auf die Funktionalität und Möglichkeiten für die DOM Manipulation eingegangen.
<script type="text/javascript" src="js/yahoo/YAHOO.js"></script>
<script type="text/javascript" src="js/yahoo/event.js"></script>
<script type="text/javascript" src="js/yahoo/dom.js"></script>
Yahoo! Drag and Drop Komponente
Um die Drag und Drop Komponente zu nutzen muss die Javascript Datei dragdrop.js inkludiert werden:
<script type="text/javascript" src="js/yahoo/dragdrop.js">Diese Javascript Datei definiert die verschiedenen Drag und Drop Klassen. Unter anderem die Oberklasse DragDrop und die konkreten Implementierungen DD sowie deren Unterklasse DDProxy, welche hier genauer angesehen werden.
Einfaches Drag und Drop mit der Klasse DD
Die Klasse DD stellt die grundsätzliche Drag und Drop Funktionalität zur Verfügung. Wenn man eine Instanz der Klasse erstellt übergibt man die Id eines HTML Block-Elements. Dieses verlinkte HTML Block-Element folgt dem Mauszeiger während einer Drag-Aktion. Als Beispiel wurde ein <div> Element erstellt welches 100×100 Pixel groß ist. Dieses HTML Element wird mit einer Id versehen, welches einer Instanz der Klasse DD bei dem Erstellen übergeben wird:
<div id="dragDropDiv" class="dragDiv">
My drag and drop div.
</div>
Bei einigen Versuchen hat sich gezeigt, dass als Stylesheet zwingend position gesetzt werden muss. Dabei ist es vorerst egal ob mit dem Wert relative oder absolute. Wenn dies nicht gesetzt ist wird sich das Block-Element bei einer Drag-Aktion nicht bewegen. Daher ist im folgenden auch noch das Listing der Stylesheet Klasse:
<style type="text/css">
.dragDiv {
position: relative;
width: 100px;
height: 100px;
background-color: #63FBDC;
cursor: move;
}
</style>Der dazugehörige Javascript Code um ein Drag und Drop (DD) Objekt zu erstellen ist der folgende:
<script type="text/javascript" language="Javascript">
var dragElement = new YAHOO.util.DD("dragDropDiv");
</script>
Generell wäre das schon ausreichend um das HTML div Element mit der Id dragDropDiv die Drag und Drop Funktionalität zu geben. Aber wichtig zu beachten ist, dass das HTML Block-Element erst nach dem gesamten Laden der Seite im DOM zur Verfügung steht. So wird allein mit diesem Javascript Code leider noch nichts funktionieren. Es gibt für dieses Problem zwei Lösungen. Die eine ist, den Javascript Code an das untere Ende, nachdem das Div Element definiert wurde, zu verlagern und auszuführen. Das würde funktionieren ist aber meiner Meinung nach nicht die eleganteste Lösung. Eine schönere Lösung ist, das Erstellen des Drag und Drop Objektes in eine init Methode auszulagern und diese Methode nach dem Laden der HTML Seite mit der <body onload=”"> Parameter aufzurufen.
An dieser Stelle bietet es sich an, ein weiteres Feature der Yahoo! UI Library, nämlich das Event Handling, zu nutzen. Mit UI Library ist es möglich zu definieren welche Methode bei welchen Event aufgerufen werden soll.
In diesem Beispiel wird die init() Methode bei dem Event load aufgerufen:
<script type="text/javascript" language="Javascript">
// global variables
var dragElement;
/**
* Initialize all needed objects here.
*/
function init() {
dragElement = new YAHOO.util.DD("dragDropDiv");
}
/**
* Add an listener for onload() method of this window.YAHOO
* When this method will be called our method init will be invoked.
*/
YAHOO.util.Event.addListener(window, 'load', init);
</script>Mit dem Erstellen dieses Javascript Codes ist auch schon das erste Ergebnis zu sehen: Beispiel 1.
Wenn man nun den ersten Abschnitt auf das wesentliche zusammenkürzt, so ist zu erkennen, dass man mit Hilfe der Yahoo! UI Library in 5 Zeilen eine Drag und Drop Funktionalität seiner HTML Seite hinzufügen kann.
Die Klasse DDProxy
Worin liegt nun der Unterschied zwischen der Klasse DD und DDProxy? Tatsächlich gibt es bis auf die Darstellung des Block-Elements während der Drag-Aktion
keinen Unterschied. Die zwei verbreitesten Darstellungsmöglichkeiten der Drag-Atkion sind durch die Klassen DD und DDProxy gegeben. Während die Klasse DD ein ganzes Objekt mit der Bewegung des Cursers mitnimmt und dies auch so visuell dargestellt wird, ist bei der Klasse DDProxy nur ein Rahmen des Elements zu sehen, während das original Element an seinem Ausgangspunkt stehen bleibt solange die Drag-Aktion durchgeführt wird.
Als implementiertes Beispiel kann die Erweiterung des ersten Beispiels eingesehen werden: Beispiel 2.
Eigene Drag und Drop Klassen erstellen
Oft reicht eine vorgegebene Funktionalität nicht aus oder diese soll nur ein wenig erweitert werden. In dem folgendem Beispiel soll ein Fenster mit Kopf und Content-Bereich erstellt werden. Das Fenster soll dabei nur über den Kopfbereich die Drag und Drop Funktionalität zugänglich machen. Des weiteren soll während der Drag-Aktion eine andere Styleclass verwendet werden.
Um das Verhalten oder Eigenschaften einer bestehenden Drag und Drop Klasse zu beeinflussen kann sie überschrieben werden. Tatsächlich ist es in Javascript möglich Objektorientiert zu arbeiten.
In diesem Beispiel wird eine neue Klasse ddParent erstellt, die von der Klasse DD erbt. Diese Klasse soll in dem Konstruktur die Id des Kopf-divs übergeben bekommen und dabei den parent-div als Drag und Drop Element an die Oberklasse weitergeben. Dabei soll aber nicht die gesamte parent-div Fläche als mögliche Drag-Aktion Initiator genutzt werden sondern lediglich die Kopfzeile. In dem folgenden Javascript Ausschnit ist die Vererbung sowie das Setzen der eben beschriebenen Konfiguration zu sehen:
function ddParent(id, sGroup, onDragStyleClass, onStopStyleClass) {
if (id) {
// get parent id (window block element) and store it
this.parentId = document.getElementById(id).parentNode.id;
// invoke init method from superclass with parent id to set parent as
// drag and drop element
this.init(this.parentId);
// Set a child element of set element in init method which should be
// used to initiate the drag operation. In this case the given id
// vi constructor (window head element) should be initiat the drag operation.
this.setHandleElId(id);
// css style to use when items are not being hovered over.
this.onDragClass = onDragStyleClass;
// css style to use when hovered over
this.onStopClass = onStopStyleClass;
}
}
// extend from class DD
ddParent.prototype = new YAHOO.util.DD();
Besonders interessant an dem obigen Javascript Code ist der Aufruf der Methode this.setHandleElId(id);. Mit diesem Aufruf kann das Element gesetzt werden, dass benutzt werden soll um eine Drag-Aktion zu starten (Drag Handler). Konkret bedeutet das, dass erst auf den Event reagiert wird wenn der definierte Drag Hanlder selektiert wird. Mit diesem Aufruf ist in dem Beispiel gewährleistet, dass nur der Kopf für die Drag und Drop Aktion genutzt werden kann.
Anschließend sollen noch die übergebnen css Style Klassen bei dem Starten und dem Stoppen der Drag-Aktion gewechselt werden. Dazu werden die Methoden startDrag und endDrag überschrieben. Die Methode startDrag wird aufgerufen sobald eine Drag-Aktion startet und die Methode endDrag wenn die Drag-Aktion aufgehürt hat. In diesem Beispiel soll die CSS Style Klasse für das gesamte div gewechselt werden, daher kann die Methode this.getEl() aufgerufen werden. Wenn zum Beispiel nur das div für den Kopf des Fensters gewechselt werden soll, dann müsste das HTML-Element über die id des Kopf Elements (YAHOO.util.DDM.getElement(this.id)) geholt werden.
/**
* Method will be called after drag and drop object is clicked.
* Set given onDragClass as style class.
*/
ddParent.prototype.startDrag = function(x, y) {
var el = this.getEl();
el.className = this.onDragClass;
}
/**
* Method will be called when done dragging.
* Set given onStopClass style class.
*/
ddParent.prototype.endDrag = function(e) {
var el = this.getEl();
el.className = this.onStopClass;
};
Die CSS Klassen werden auf der HTML Seite direkt definiert und werden beim instanziieren der ddParent Klasse im Konstruktur übergeben. Die für das div-Fenster definierten CSS Klassen sind die folgenden:
<style type="text/css">
.winDiv {
position: relative;
width: 400px;
height: 350px;
background-color: #63FBDC;
}
.onDragWindow {
position: relative;
width: 400px;
height: 350px;
background-color: #2693F2;
}
.winDivHeader {
height: 25px;
padding: 4px 0px 0px 5px; /* oben rechts unten links */
background-color: #888888;
font-size: 12px;
font-weight: bold;
cursor: move;
}
.windDivContent {
font-size:10px;
padding-left:5px;
}
</style>
Das Erstellen des Drag und Drop Objektes gestaltet sich wie schon bei dem zwei ersten Beispielen bis auf die erweiterten übergabeparameter für den Konstruktor:
<script type="text/javascript" language="Javascript">
// global variables
var dragElement;
function init() {
// Constructor parameter are:
// 'id', 'group', 'css style when dragging', 'css style when not dragged'
dragElement = new ddParent("windowHeader", "", "onDragWindow", "winDiv");
}
YAHOO.util.Event.addListener(window, 'load', init);
</script>
Das Beispiel dazu kann hier angesehen werden: Beispiel 3.
Fazit
Diese drei Beispiele zeigen wie einfach Drag und Drop in eine HTML Seite mit Hilfe der Yahoo! User Interface Library einzubinden ist. Zudem wurde gezeigt wie eine Klasse für eigene Zwecke abgeleitet und erweitert werden kann. In den von Yahoo mitgelieferten Beispielen kann man noch weitaus komplexere Beispiele finden. Auch im Zusammenspiel mit Animationen oder anderen Komponenten kann noch einiges erreicht werden. Da ist also noch viel Spielraum für Beispiele =).
Die drei implementierten Beispiele können auch direkt von der Übersichtsseite aus aufgerufen werden.
