Per Javascript: Bequemes Drag & Drop für Webanwendungen

Anhand einer leicht anwendbaren Drag & Drop-Library und einer konkreten Aufgabe stellen wir Ihnen vor, wie Sie Drag & Drop effektiv und sinnvoll auf Ihrer Website einsetzen.

Innerhalb des Admin-Bereichs einer Anwendung sollen einem Benutzer Rechte zugeordnet werden. Dazu sind zwei Spalten vorgesehen: Eine enthält die bereits zugewiesenen Berechtigungen, während die andere alle Rechte enthält, die der Nutzer nicht hat. Per Drag & Drop sollen die Rechte ganz einfach von einer Spalte in die andere verschoben werden können.

Drag and Drop

Die beiden Spalten sind als ungeordnete Listen realisiert. Die <li>-Elementen stellen die einzelnen Rechte dar. Die Datenbank-Id jedes Rechts ist dabei identisch zum Id-Attribut des Listenelements. Bei einer echten Anwendung würde man natürlich die Listen-Elemente dynamisch generieren.

Im onload-Event des aktuellen Fensters passiert der grundlegende Aufbau des Drag & Drop-Schemas. Dabei werden beide Spalten in den gleichen Container gepackt. Durch die Container-Logik unterstützt die Bibliothek mehrere, voneinander unabhängige Eingabe-Elemente auf derselben Seite.

Das System identifiziert die beiden Rechte-Spalten anhand ihrer unterschiedlichen Id in pos_col und neg_col. Den Hauptteil der Definitionen hier macht die Zuweisung der Stile für die jeweilige Zielspalte aus, die beim Überfahren und Fallenlassen zum Einsatz kommen sollen.

Nachricht ans Backend schicken

Bereits die wenigen Zeilen Javascript im onload-Event sorgen dafür, dass das Drag & Drop-System funktioniert, also der Inhalt zwischen beiden Spalten verschiebbar ist. Aber wie soll das PHP-Skript, das die Formulardaten empfängt, den Zustand bei Absenden erfahren?

Dazu bietet die Drag & Drop-Library die Funktion serData() (“serialize data”), die den aktuellen Zustand in eine Zeichenkette packt. Für die Weitergabe enthält das Formular ein verstecktes Feld rights. Klickt der Anwender auf den Submit-Button, wird vor dem Versand per onclick-Statement der Aufruf von getRights() erzwungen.

Diese Funktion ruft serData() mit der für das Rechtesystem vergebenen Container-Id auf und weist das Ergebnis dem versteckten Feld rights zu. Dabei wird zum Beispiel ausgegeben:

pos_col(3,9):neg_col(1,2,4,5,6,7,8)

Das PHP-Skript, das die Formulardaten aufnimmt, muss dann diesen Rückgabewert per explode() oder eine andere geeignete Funktion aufsplitten. Daraus kann das Programm ermitteln, welche Rechte der aktuelle Benutzer haben soll und die entsprechenden Datenbank-Operationen ausführen.

<html><head><title>Rechteverwaltung</title>

<link rel="stylesheet" href="dd_files/lists.css" type="text/css">

<style type="text/css">

body { margin: 10px 10px 10px 10px;

font-family: Arial, Verdana, Helvetica

}

#pos_col,#neg_col{width: 180px; float: left;margin-left: 5px;}

div.colhead {font-size: 12px; font-weight: bold; margin-bottom: 5px;}

form {clear: left}

</style>

<script type="text/javascript" src="dd_files/coordinates.js"></script>

<script type="text/javascript" src="dd_files/drag.js">

</script>

<script type="text/javascript"src="dd_files/dragdrop.js"></script>

<script type="text/javascript">

window.onload = function() {

var list = document.getElementById("pos_col");

DragDrop.makeListContainer( list, 'ddrights' );

list.onDragOver = function() {

this.style["background"] = "#EEF"; };

list.onDragOut = function(){

this.style["background"] = "none"; };

list = document.getElementById("neg_col");

DragDrop.makeListContainer(list, 'ddrights');

list.onDragOver = function() {

this.style["background"] = "#EEF"; };

list.onDragOut = function() {

this.style["background"] = "none";};

}

function getRights(){

rights = document.getElementById("rights");

rights.value = DragDrop.serData('ddrights', null);

}

</script></head>

<body><h2>Benutzerrechte zuweisen</h2><br />

<ul id="pos_col" class="sortable boxy">

<div class="colhead">Zugewiesene Rechte</div>

<li id="3">Beiträge schreiben</li>

<li id="9">Kommentare schreiben</li>

</ul>

<ul id="neg_col" class="sortable boxy">

<div class="colhead">Verfügbare Rechte</div>

<li id="1">User anlegen</li>

<li id="2">Admin-Bereich betreten</li>

<li id="4">Beiträge freigeben</li>

<li id="5">Beiträge löschen</li>

<li id="6">Kommentare freigeben</li>

<li id="7">Files hochladen</li>

<li id="8">Files abrufen</li>

</ul>

<form action="" method="post">

<br />

<input type="hidden" name="rights" id="rights" value="" />

<input type="submit" onclick="getRights()" value="Rechte speichern" />

</form>

</body></html>

Installation der Basisbibliothek

Holen Sie sich die Drag & Drop-Library von der Websitedes Autors. Entpacken Sie die Sie die empfangene Datei dd.zip in ein Verzeichnis Ihres Webservers. Das Demo-Skript dd.php sollte direkt funktionieren. Es war auch die Grundlage für die hier vorgestellte Anwendung.

Die Library basiert auf einer Grundidee, die dann von mehreren Autoren überarbeitet wurde. Die Unterstützung mehrerer Listen kam zum Beispiel erst später hinzu.

Weitere Möglichkeiten der Drag & Drop-Library

Für andere Aufgabenstellungen als die hier vorgestellte Rechteverwaltung kann die Reihenfolge der übergebenen Objekte wichtig sein. Die liefert die Funktion serData() mit: Die Reihenfolge der enthaltenen Ids entspricht genau der Anordnung, die der Benutzer hergestellt hat. Damit sind Umsortierungs-Anwendungen einfach zu schreiben.

Wenn auch im Beispiel zwei Spalten zum Einsatz kommen: Das System ist nicht darauf festgelegt. Sie können eine oder vier Spalten verwenden, zwischen denen Inhalte hin und her geschoben werden können. Möchten Sie dabei aber bestimmte Kombinationen aus verschobenem Objekt und Zielzone verbieten, reichen die Möglichkeiten der Bibliothek nicht mehr und Sie müssen sie selbst erweitern.

Falls Sie als Ergebnis der Funktion serData() nicht die Id-Attribute der einzelnen Listenelementen erhalten möchten, sondern das, was innerhalb von <li>… </li> steht, müssen Sie in der Javascript-Datei dragdrop.js eine Zeile in serData() ändern. Suchen Sie dort nach

string += items[i].id;

und ändern Sie die Zeile so, dass dort steht

string += items[i].innerHTML;

Brauchen Sie beide Versionen, ergänzen Sie serData() um einen weiteren Parameter, der entscheidet, wie die Variable string an der Fundstelle befüllt wird.

Drag & Drop mit Ajax nutzen

Eine andere Funktionsweise des Skripts wäre über Ajax möglich. Dann würde jede einzelne Drag & Drop-Operation zu einem Ajax-Aufruf führen, der die Zuweisung oder das Löschen eines einzelnen Rechts bewirkt. Das Software-Paket des Autors der Drag & Drop-Bibliothek enthält im unteren Teil der Demo-Anwendung dd.php anschaulich ein solches Beispiel für das PHP-Framework Sajax.

Ähnliche Beiträge