Allgemeines

In diesem Tutorial beschreibe ich, wie Ihr ein Drag & Drop Dashboard mit automatischem Speichern in Cookies mit Javascript und Mootools realisiert.

Dazu benötigt Ihr Grundkenntnisse von Javascript und Mootools sowie ein wenig CSS & HTML Kenntnisse.

1. HTML & CSS

Als erstes schreiben wir uns den HTML Code zusammen, den wir für das Dashboard benötigen. In meinem Fall gibt es zwei Spalten in denen sich Boxen befinden die wir später Draggen und Droppen können.

<!-- Container --> <div class="dashboard" id="droppable-holder"> <!-- linke Spalte --> <div id="holder1" class="droppable"> <!-- Box 1 --> <div class="dragable" id="box1"> <h3>Box 1</h3> <p> Text der 1. Box</p> </div> <!-- Box 2 --> <div class="dragable" id="box2"> <h3>Box 2</h3> <p> Text der 2. Box</p> </div> </div> <!-- rechte Spalte --> <div id="holder2" class="droppable"> <!-- Box 3 --> <div class="dragable" id="box3"> <h3>Box 3</h3> <p> Text der 3. Box</p> </div> <!-- Box 4 --> <div class="dragable" id="box4"> <h3>Box 4</h3> <p> Text der 4. Box</p> </div> </div> <!-- Float-Aufhebung --> <div class="clear"></div> </div>

Wichtig ist hier, das die CSS-Klassen droppable und dragable an den richtigen DIV-Element vorhanden sind. Das heißt, dass die DIV-Elemente die für das Auffangen der Verschiebbaren Boxen die Klasse droppable und die Boxen die verschiebbar sind die Klasse dragable besitzen.

Die verschiebbaren Boxen können natürlich beliebig aufgebaut werden, sollten jedoch wie oben beschrieben die CSS-Klasse dragable besitzen. Wichtig für das spätere Speichern der Positionen ist das Attribut ID eines Elements. Dieses muss eindeutig sein und darf nicht doppelt vorkommen. Grundsätzlich darf das Attribute ID sowieso nicht doppelt im HTML vergeben werden.

Die DIV-Elemente die die CSS-Klasse droppable besizen müssen auch eindeutige ID's haben, damit das spätere Javascript auch die Boxen identifizieren kann, in denen die Box Elemente fallen gelassen werden.

Nun haben wir den Grundstein für die Ausgabe gelegt. Hier noch ein paar kleine CSS Styles die natürlich auch beliebig geändert werden können.

.clear { clear: both; } body { font-family:verdana; font-size:11px; } #dragable-holder { margin: 20px 0; } #droppable-holder { } .droppable { width: 480px; min-height: 400px; float: left; margin: 0 10px 0 0; border:1px dashed #ccc; } .mo { background: #FFF58F; } .locked { cursor: default; background: #fffea1; } .locked-border { border: 1px solid #fc0; } .dragable { width:478px; margin-bottom:10px; background:white; position: relative; border: 1px dotted #ccc; float: left; z-index:10; } .dragable h3 { margin:0px; padding:5px; background:silver; cursor: move; text-align: left; }

2. Optionen der Klasse

Grundsätzlich gibt es mehrere Optionen für die Dashboard-Klasse die als Standardwerte gesetzt werden. Ich habe hier nun die Options im Quelltext kommentiert, damit Ihr wisst welche Options der Klasse zur Verfügung stehen.

getOptions: function () { return { LeftCol: 'holder1', // Name des Attributes ID der linken Spalte RightCol: 'holder2', // Name des Attributes ID der rechten Spalte HtmlElement: 'div', // HTML Elementbezeichnung der Boxen ( könnte z.B. auch eine Tabelle sein..) InjectPosition: 'top', // Positionierung der fallengelassenen Box ( top oder bottom ) HighlightColor: '#ddf,#ccc', // Highlight Farbe der fallengelassenen Box. CookieLifeTime: '100' // Cookie Lebenszeit in Tagen } },

3. Methode - initialize()

In der Methode initialize() werden die Elemente die der Klasse übergeben werden gesetzt sowie die Optionen. Zusätzlich werden die Methoden getDragableDashboard() und setDashboard() aufgerufen. getDragableDashboard() ist für das Draggen & Droppen zuständig und setDashboard() setzt beim Aufruf der Klasse die gespeicherten Positionen der Boxen im Browser um.

initialize: function ( elDragable,elDroppable, options ) { this.setOptions( this.getOptions(), options); this.dragable = $$(elDragable); this.droppable = elDroppable; this.getDragableDashboard(); this.setDashboard(); },

4. Methode - getDragableDashboard()

Im Prinzip ist die Methode getDragableDashboard() sehr simple. Es werden einfach alle Boxen durch eine foreach-Schleife geschickt und anschließend wird eine neue Instanz der Klasse Drag.Move von Mootools initialisiert. Dieser wird dann das Element und die Container der linken und rechten Spalte übergeben (Sprich: .dragable und .droppable).

In der Funktion onDrop() wird lediglich durch el.inject() das Element in die neue Spalte eingefügt, je nachdem welche Spalte gerade überfahren wurde. Nun wird noch ein Highlight der Box gesetzt und die neue Positionierung der Boxen wird mit der Methode saveDashboard() in einem Cookie gespeichert.

getDragableDashboard: function () { this.dragable.each(function(drag) { //make it dragable, and set the destination divs var myDrag = new Drag.Move(drag, { droppables: this.droppable, onDrop: function(el,droppable) { el.inject(droppable,this.options.InjectPosition); el.setStyles({'left':0,'top':0,'position':'relative','zIndex':'100'}); //hack -- wtf? droppable.removeClass('mo'); var Color = this.options.HighlightColor.split(',') el.highlight(Color[0], Color[1]); // Save Dashboard into Cookie this.saveDashboard(); }.bind(this), onDrag: function(el,droppable) { el.setStyle('zIndex','200'); }, onEnter: function(el,droppable) { droppable.addClass('mo'); }, onLeave: function(el,droppable) { droppable.removeClass('mo'); } }); drag.setStyles({ 'top':0, 'left':0, 'margin-right':'20px' }); }.bind(this)); },

5. Methode - saveDashboard()

Nun kommen wir zum Speichern des Dashboards. Es werden hier einfach alle Spalten, die Boxen aufnehmen können, durch eine foreach-Schleife verarbeitet. Dabei werden die Kinder, in meinem Fall sind es DIV-Elemente, ermittelt und je nach Spalte einem String hinzugefügt. Anschließend werden für beide Spalten einzelne Cookies geschrieben, die so benannt sind die die jeweilige Spalte heißen (Sprich hier: "holder1" und "holder2"). Dem Cookie wird der String mit den beinhalteten Elementen sowie die Lebenszeit des Cookies übergeben. Hierbei ist zu beachten das die Lebenszeit der Cookies in Tagen übergeben wird. Ich habe einfach den Standardwert auf 100 Tage gesetzt.

Diese Regelung gilt nur, wenn der Benutzer die Cookies nicht löscht oder ganz deaktiviert hat. Falls ein Benutzer die Cookies ganz deaktiviert, so kann das Cookie nicht geschrieben werden und die Elemente ordnen sich bei einem neuen Aufrufen der Seite so an wie Ihr es im HTML festgelegt habt.

saveDashboard: function () { var arrDroppables = $$(this.droppable); var holder1string = ''; var holder2string = ''; arrDroppables.each( function(elDropable,intIdx) { var arrChildren = elDropable.getChildren(this.options.HtmlElement); if( intIdx == 0 ) { holder1string+= arrChildren.getProperty('id'); } else { holder2string+= arrChildren.getProperty('id'); } }.bind(this)); Cookie.write(this.options.LeftCol, holder1string, {duration: this.options.CookieLifeTime}); Cookie.write(this.options.RightCol, holder2string, {duration: this.options.CookieLifeTime}); },

6. Methode - setDashboard()

Die Methode setDashboard() macht eigentlich genau das Gegenteil von saveDashboard(). Es wird geprüft ob ein Cookie zu dem Spaltennamen gesetzt ist, wenn dieser Fall zutrifft, so wird das Cookie ausgelesen und der String wird ausgewertet. Nach einem Aufteilen des Strings nach "," wird nun das Array durch eine foreach-Schleife den Elementen der jeweiligen Spalte zugeordnet werden.

7. Der Aufruf

Um die Klasse aufzurufen wird einfach im Template folgender Code eingefügt.

<mce:script type="text/javascript"><!-- //when the dom is ready... window.addEvent('domready',function() { document.ondragstart = function () { return false; }; //IE drag hack var MyDashboard = new Dashboard('.dragable','.droppable',{ LeftCol: 'holder1', // Name des Attributes ID der linken Spalte RightCol: 'holder2', // Name des Attributes ID der linken Spalte HtmlElement: 'div', // HTML Elementbezeichnung der Boxen ( könnte z.B. auch eine Tabelle sein..) InjectPosition: 'bottom', // Positionierung der fallengelassenen Box ( top oder bottom ) HighlightColor: '#ddf,#ccc', // Hightlight Farbe der fallengelassenen Box. CookieLifeTime: '100' // Cookie Lebenszeit in Tagen }); }); // --></mce:script>

Wie oben unter Optionen beschrieben werden einfach die Klassen .dragable und .droppable an die Klasse übergeben. Alternativ dazu kann man auch noch die Standardwerte der Optionen überschreiben, wie es in dem Beispiel zu sehen ist.

Zusammenfassung

Das Dashboard von mir kann sicherlich noch um viele tolle Funktionen erweitert werden. Aber ich denke für jeden Anfänger der eine einfache Dashboardfunktion nutzen möchte ist es ein guter Einstieg. Desweiteren bin ich für Hinweise und Verbesserungen immer offen.

In dem folgenden Codeblock könnt Ihr noch die gesamte Dashboard Klasse sehen. Ein funktionierendes Beispiel folgt in kürze.

var Dashboard = new Class({ Implements: [Events,Options], getOptions: function () { return { LeftCol: 'holder1', RightCol: 'holder2', HtmlElement: 'div', InjectPosition: 'top', HighlightColor: '#ddf,#ccc', CookieLifeTime: '100' } }, initialize: function ( elDragable,elDroppable, options ) { this.setOptions( this.getOptions(), options); this.dragable = $$(elDragable); this.droppable = elDroppable; this.getDragableDashboard(); this.setDashboard(); }, getDragableDashboard: function () { this.dragable.each(function(drag) { //make it dragable, and set the destination divs var myDrag = new Drag.Move(drag, { droppables: this.droppable, onDrop: function(el,droppable) { el.inject(droppable,this.options.InjectPosition); el.setStyles({'left':0,'top':0,'position':'relative','zIndex':'100'}); //hack -- wtf? droppable.removeClass('mo'); var Color = this.options.HighlightColor.split(',') el.highlight(Color[0], Color[1]); // Save Dashboard into Cookie this.saveDashboard(); }.bind(this), onDrag: function(el,droppable) { el.setStyle('zIndex','200'); }, onEnter: function(el,droppable) { droppable.addClass('mo'); }, onLeave: function(el,droppable) { droppable.removeClass('mo'); } }); drag.setStyles({ 'top':0, 'left':0, 'margin-right':'20px' }); }.bind(this)); }, saveDashboard: function () { var arrDroppables = $$(this.droppable); var holder1string = ''; var holder2string = ''; arrDroppables.each( function(elDropable,intIdx) { var arrChildren = elDropable.getChildren(this.options.HtmlElement); if( intIdx == 0 ) { holder1string+= arrChildren.getProperty('id'); } else { holder2string+= arrChildren.getProperty('id'); } }.bind(this)); Cookie.write(this.options.LeftCol, holder1string, {duration: this.options.CookieLifeTime}); Cookie.write(this.options.RightCol, holder2string, {duration: this.options.CookieLifeTime}); }, setDashboard: function () { if( Cookie.read(this.options.LeftCol) != null ) { var arrHolder1 = Cookie.read(this.options.LeftCol).split(','); if( arrHolder1 != "" ) { arrHolder1.each( function(elString) { var Element = $(elString); Element.inject($(this.options.LeftCol)); }.bind(this)); } } if( Cookie.read(this.options.RightCol) != null ) { var arrHolder2 = Cookie.read(this.options.RightCol).split(','); if( arrHolder2 != "" ) { arrHolder2.each( function(elString) { var Element = $(elString); Element.inject($(this.options.RightCol)); }.bind(this)); } } } });