Wenn Sie sich den konkreten JavaScript-Code in der Beispieldatei ansehen, können Sie erkennen, dass mit der Klasse YAHOO gearbeitet wird. Im Inneren der Erweiterung „extend“ werden Reaktionen auf Mausereignisse definiert.
Zentraler Angelpunkt der Reaktion ist die Funktionsreferenz „function(e)“, der ein Ereignisobjekt übergeben wird.
Sie finden im Quelltext auch die Definition eines selbst geschriebenen Konstruktors (YAHOO.example.DDResize), der in der Reaktionsfunktion über „dd = new YAHOO.example.DDResize“ analog zum Standardkonstruktor des YUI-APIs zum Erzeugen eines Objekts verwendet wird .
Eine Modifikation des Beispiels
Das nachfolgende Listing ist eine Modifikation der eben besprochenen Beispielapplikation, die zwei Elemente verwendet. Zum vorhandenen div-Container, der nun zusätzlich einen umgebrochenen Text enthält, ist ein verschiebbares Bild hinzugekommen. Der Abdruck des Listings verzichtet aus Platzgründen auf sämtliche Kommentare und die Implementation für den Konstruktor und YAHOO.extend(), da sie sich nicht vom Original unterscheiden:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Verschiebbare Webseitenelemente</title>
<style type="text/css">
body { margin:0; padding:0; }
</style>
<link rel="stylesheet" type="text/css" xhref="../../build/fonts/fonts-min.css?_yuiversion=2.4.0" />
<script type="text/javascript" xsrc="../yui/build/yahoo-dom-event/yahoo-dom-event.js?_yuiversion=2.4.0"></script>
<script type="text/javascript" xsrc="../yui/build/dragdrop/dragdrop.js?_yuiversion=2.4.0"></script>
<style type="text/css">
#dd-panel { position: relative; top: 0px; left: 20px;
height: 200px; width: 150px; text-overflow:clip;
border: 1px solid #333333; background-color: green; }
#dd-panel2 { position: relative; top: -10px; left: 240px;
border: 1px solid #333333; background-color: #f7f7f7; }
#dd-resize-handle { cursor: se-resize; width: 10px;
height: 10px;position: absolute; bottom: 0px; right: 0px;
background-color: blue; font-size: 1px; }
</style>
<script type="text/javascript">
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
YAHOO.example.DDResize.superclass.constructor.apply(this, arguments);
...};
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {...});
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize");
dd2 = new YAHOO.util.DD("dd-panel", "paneldrag");
dd3 = new YAHOO.util.DD("dd-panel2", "paneldrag");
dd2.addInvalidHandleId("dd-resize-handle");
});
})();
</script>
</head>
<body class="yui-skin-sam">
<h1>Drag and Drop</h1>
<div>Das div-Element ist verschiebbar und in der Größe zu verändern. Das Bild kann nur verschoben werden.</div>
<div id="dd-panel">
<div id="dd-resize-handle"></div>
</div>
<img xsrc="http://rjs.de/bilder/devil.gif" id="dd-panel2">
</body>
</html>
Listing 1
Im Wesentlichen wurde für die Modifikation eine dritte ID für das Bild eingeführt, mit CSS formatiert sowie ein Objekt erzeugt, das die Referenz auf die Grafik zur Verfügung stellt. Weitere Komponenten wie die vorgefertigten Steuerelemente, aber auch komplexere Strukturen lassen sich analog verwenden oder modifizieren.
Fazit
Wenn man sich den Quellcode der einzelnen YUI-Komponenten ansieht, erkennt man sowohl recht triviale Kernkomponenten wie die einfachen Event- und DOM-Utilities oder Animationen, die einen durchschnittlichen JavaScript-Programmierer kaum fordern. Aber bereits Drag & Drop-Features, komplexe Konstruktionen und die Neuerungen der Versionen 2.3 und 2.4 wie der RTF-Editor ersparen viel Arbeit. Auch die CSS-Bibliothek ist Gold wert.
