Drag and Drop

Typische Drag-and-Drop-Aktion: Dateien werden mit der Maus zwischen Verzeichnissen verschoben

Drag and Drop,oft auchDrag & DropoderDrag’n’DropsowieDrag-and-DropundDrag-and-drop(alternative Schreibweisen laut Duden), deutschZiehen und Ablegen,kurzD&D,ist eine Methode zur Bedienunggrafischer Benutzeroberflächenvon Rechnern durch das Bewegen grafischer Elemente mittels einesZeigegerätes.Ein Element wie z. B. einPiktogrammkann damit gezogen und über einem möglichen Ziel losgelassen werden. Dieses kann zum Beispiel markierter Text oder das Symbol einer Datei sein. Im Allgemeinen kann Drag and Drop genutzt werden, um Aktionen auszuführen oder Beziehungen zwischen zwei abstrakten Objekten herzustellen.

Grundlagen

Ursprünglich ist Drag & Drop eineVisualisierungvonKopieren und Einfügen(bzw.Ausschneiden und Einfügen,also Verschieben) für diverse Datenelemente – im Unterschied dazu nutzt es aber nicht dieZwischenablage,sondern die Puffer betriebssystemnaher Kommandos.

Als wohl intuitivste Form der Interaktion mit einem gewöhnlichen PC hielt Drag and Drop rasch Einzug in viele Anwendungen desPersonal Computers.Wann und von wem Drag and Drop erfunden wurde, ist umstritten. Nach der Entwicklung der Schreibtischmetapher amPARC,welches die Rechte in den 1970ern anAppleverkaufte, perfektionierte Apple das GUI zumHuman Interfaceund definierte auch erstmals dieHuman Interface Guidelineals Vorgabe für die Gestaltung von Benutzeroberflächen. Hierin werden u. a. auch die wesentlichen Kriterien für eine gute Drag-and-Drop-Umsetzung beschrieben.

Heute geht Drag & Drop über das Verschieben von Datenelementen hinaus und umfasst neben diesem Aspekt auch das „Bewerfen von Programmen mit Dateien “– hierbei visualisiert esInterprozesskommunikation,also etwaAufrufparametereinesProgrammsoder innerhalb einer Anwendung den Aufruf von Subroutinen und Modulen. DenBenutzerbraucht dabei die Syntax, die der Aktion zugrunde liegt, nicht zu kümmern.

Auf einer modernen GUI der gängigenBetriebssystemekann man im Allgemeinen die meisten Elemente auf andere ziehen; der Effekt hängt vom jeweiligen Typus der Elemente ab und davon, ob man die linke oder rechteMaustaste(bzw. die Entsprechung anderer Zeigegeräte) beim Ziehen gedrückt hält.

Visualisierung

Bei einer vollständigen Umsetzung erhält der Benutzer an allen signifikanten Stellen einer Drag-and-Drop-Operation eine sofortige Rückmeldung:

• Markieren des Elements
• Visualisierung des Ziehens, und Verlassen des Ursprungsortes
• Anzeigen einer Drop-Möglichkeit
• Rückmeldung beim Fallenlassen

Markieren des Elements

Da Drag als Ziehen mit gedrückter Maustaste definiert ist, wird die Operation immer durch Bewegen desMauszeigersauf das Objekt und Drücken einer der Tasten eingeleitet. EineAuswahldes Elements ist in der Regel mit dem Beginn des Drag-and-Drop-Vorgangs verbunden. Nur selten stößt man auf die unpraktischere Variante, das zu ziehende Element zuvor extra angeklickt haben zu müssen.

Ein Spezialfall ist das Ziehen mehrerer Objekte. Diese müssen zuerst alle ausgewählt werden. Oft geschieht auch dies wiederum per Drag and Drop mit einem sogenannten „Gummiband “(ribbonoderMarkierungsrechteck,Visualisierungsersatz für gedrückteUmschalttaste). Hierbei werden Objekte innerhalb eines rechteckigen Gebiets zwischen Start- und Endpunkt der auswählenden Drag-Operation ausgewählt. Nochmaliges Drücken der Maustaste über einem der ausgewählten Elemente leitet das Ziehen aller Elemente ein.

Ziehen

Vollständige Drag-and-Drop-Umsetzungen geben eine visuelle Rückmeldung, sobald der Benutzer ein Element zieht, also die Maus bei gedrückt gehaltener Maustaste verschiebt. Um während des Ziehens das Auffinden eines Zielobjekts zu erleichtern, wird das gezogene Element häufig halbtransparent dargestellt, so dass der Untergrund durchschimmert: Es „teilt “sich in dasjenige am ursprünglichen Ort und das gezogene Abbild der ausgewählten Elemente, das sich mit dem Cursor mitbewegt und so die Drag-and-Drop-Möglichkeit anzeigt.

Anzeige einer Drop-Möglichkeit

Häufig wird angezeigt, welche Aktion das Ziehen eines Elements auslöst. Zieht der Benutzer ein Element über ein mögliches Drop-Ziel, so ist dies an dem gezogenen oder „berührten “Element erkennbar. Kann ein Element in einen Bereich gezogen werden, so wird dieser Bereich meist besonders hervorgehoben. Dies geschieht jedoch wiederum nicht, wenn der Benutzer innerhalb des Bereichs eine neue Drop-Möglichkeit überfährt. Dann wird diese hervorgehoben.

Meist geschieht das Hervorheben einer Drop-Möglichkeit durch Rahmen oder Farbänderungen. In Spezialfällen wie zum Beispiel beim Arrangieren von mehreren Elementen wird auch oft eineEinfügemarkeeingeblendet oder eine Lücke geschaffen, wo das gezogene Element platziert werden wird. Beim Ziehen einer Datei auf ein Ordner-Iconkann mittels kleiner Symbole kenntlich gemacht werden, ob die Datei einfach verschoben, kopiert oder eineVerknüpfungder Datei erzeugt wird.

Manche Anwendungen ermöglichen das Öffnen und/oder Sichtbar-Machen von verdeckten Inhalten, wenn der Benutzer mit demCursoreinen Moment auf geschlossenen oder halb verdeckten Objekten verharrt, etwaAktivieren eines Fensters,auch mit Autoraise minimierter Fenster.

Sollte ein Drop auf ein Element keinen Sinn ergeben (zum Beispiel Ordner in sich selbst legen), so bleibt oft nicht nur eine Hervorhebung aus, sondern es erscheint manchmal auch ein zusätzlicher Hinweis in Form eines Verbotsschilds oder Ähnliches neben dem Zeiger. Bei Drag-and-Drop mehrerer Elemente kommt es in der Regel nur zu einer Anzeige einer Drop-Möglichkeit, wenn alle gezogenen Elemente für die auszuführende Aktion geeignet sind.

Drop (Loslassen)

Nach dem Drop (deutschloslassenoderfallen lassen) eines Elements erhält der Benutzer fast immer eine Rückmeldung über den Erfolg seiner Aktion.

Nach erfolgreichen Drag and Drop verschwindet die Hervorhebung des Drop-Ziels. Wurde ein Element verschoben, so verschwindet es spätestens mit Loslassen der Maustaste von seinem bisherigen Platz und erscheint an seiner neuen Position. Für längerdauernde Aktionen erscheinen Visualisierungen wie dieSanduhroder andereFortschrittsanzeigen.

Wurde Drag and Drop über keinem möglichen Drop-Element beendet oder ist die Aktion mit dem gezogenen Element nicht sinnvoll (s. o.), so wird dies meist dadurch angedeutet, dass die an den Cursor gehefteten Symbole zurück an ihren Ursprung „hüpfen “. Sollten weitere Einstellungen oder eine Bestätigung nötig sein, so erscheinen diese nach Beenden des Drag and Drop und vor Ausführung der Aktion, etwa alsDialogfenster.

Manchmal bleiben Elemente auch nach erfolgreichem Drag and Drop weiterhin ausgewählt, oder es werden mehrere gleichzeitig losgelassene Elemente gemäß der Reihenfolge ihrer Auswahl verschoben.

Anwendungsbereiche

Für folgende Befehle hat sich Drag and Drop als intuitivste Bedienmöglichkeit durchgesetzt:

• Ziehen eines Datei-Symbols (Icons) auf ein Ordnersymbol, um die Datei zu verschieben, zu kopieren oder eine Verknüpfung zu erstellen
• Ziehen von markiertem Text zur Umstrukturierung eines Dokuments
• Ziehen eines Icons auf ein Programm-Symbol oder in ein Fenster, um es zu öffnen oder zu bearbeiten
• Drag and Drop, um Objekte in einer Leiste oder Liste neu zu arrangieren
• Drag and Drop eines Objekts, um es einer Warteschlange hinzuzufügen
• Verschieben von Bildausschnitten in derBildbearbeitung
• Hantieren an Pfaden einerVektorgrafik
• GIS-Funktion desPanningzum Verschieben einer Karte
• Bewegen eines Datei-Symbols des Desktops auf eine Internetseite, um einenUpload-Befehl in Gang zu setzen

Drag and Drop auf Internetseiten

Mit zunehmendem Aufkommen von Web-Anwendungen und -Diensten nahmen auch die Bemühungen, Drag and Drop inInternetseitenumzusetzen, zu. Dies ist oft nur mit clientseitigen Scriptsprachen wieJavaScriptmöglich. Sowohl Browserhersteller wieMicrosoftmit demdataTransfer-Objectals auch verschiedeneWebentwicklerversuchten die Entwicklung intuitiver Web-Schnittstellen mit Drag and Drop zu ermöglichen.

Die erste vollständige Umsetzung in allen gängigen Browsern gelang zwei deutschen Studenten mit Virtos.net. Das Internet-Projekt wurde 2005 beiJugend forschtvorgestelltund unter anderem von derEduard-Rhein-Stiftungmit demKonrad-Zuse-Jugendpreisausgezeichnet.

Insbesondere das gleichzeitige Ziehen verschiedener Elemente und dieAnzeige einer Drop-Möglichkeitwar lange nur in einzelnen Browsern möglich. Dies wird wichtig, sobald Elemente auf der Webseite nicht nur verschoben, sondern mit dem Loslassen der Maus Aktionen ausgelöst werden sollen (vgl.oben). MitHTML5wurde erstmals versucht, eine standardisierte und native Drag-and-Drop-Funktionalität bereitzustellen.

Web-Frameworks wiejQuerystellen ebenfalls eine Lösung für vollständige Drag-and-Drop-Aktionen zur Verfügung.

Weblinks

• Drag and Drop mit C#/VB.NET
• Drag and Drop mit Java
• Drag and Drop in HTML 5
• Übersicht über Drag & DropimMSDN