imported>Siegbert v2: Archivversion für tote Links / Form

2026-03-09T11:15:05Z

Archivversion für tote Links / Form

Neue Seite

[[Datei:Drag-and-drop-de.svg|miniatur|Typische Drag-and-Drop-Aktion: Dateien werden mit der Maus zwischen Verzeichnissen verschoben]]

'''Drag and Drop''', oft auch ''Drag & Drop'' oder ''Drag’n’Drop'' sowie ''Drag-and-Drop'' und ''Drag-and-drop'' (alternative Schreibweisen laut Duden<ref>{{Internetquelle |url=https://www.duden.de/rechtschreibung/Drag_and_Drop |titel=Duden {{!}} Drag and Drop {{!}} Rechtschreibung, Bedeutung, Definition, Herkunft |sprache=de |abruf=2024-08-16}}</ref>), deutsch ''Ziehen und Ablegen'', kurz ''D&D'', ist eine Methode zur Bedienung [[Grafische Benutzeroberfläche|grafischer Benutzeroberflächen]] von Rechnern durch das Bewegen grafischer Elemente mittels eines [[Zeigegerät]]es. Ein Element wie z. B. ein [[Piktogramm]] kann 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 eine [[Visualisierung]] von ''[[Kopieren und Einfügen]]'' (bzw. ''Ausschneiden und Einfügen'', also Verschieben) für diverse Datenelemente – im Unterschied dazu nutzt es aber nicht die [[Zwischenablage]], 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 des [[Personal Computer]]s. Wann und von wem Drag and Drop erfunden wurde, ist umstritten. Nach der Entwicklung der Schreibtischmetapher am [[Xerox PARC|PARC]], welches die Rechte in den 1970ern an [[Apple]] verkaufte, perfektionierte Apple das GUI zum ''Human Interface'' und definierte auch erstmals die ''Human Interface Guideline'' als 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.<ref>{{Internetquelle |url=http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/ |titel=Introduction to the Apple Human Interface Guidelines |werk=developer.apple.com |datum=2003-10-18 |sprache=en |archiv-url=https://web.archive.org/web/20040214122513/http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/ |archiv-datum=2004-02-14 |abruf=2026-03-09}}</ref>

Heute geht Drag & Drop über das Verschieben von Datenelementen hinaus und umfasst neben diesem Aspekt auch das „Bewerfen von Programmen mit Dateien“ – hierbei visualisiert es [[Interprozesskommunikation]], also etwa [[Kommandozeilenparameter|Aufrufparameter]] eines [[Anwendungsprogramm|Programms]] oder innerhalb einer Anwendung den Aufruf von Subroutinen und Modulen. Den [[Benutzer]] braucht dabei die Syntax, die der Aktion zugrunde liegt, nicht zu kümmern.

Auf einer modernen GUI der gängigen [[Betriebssystem]]e kann 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 rechte [[Maus (Computer)#Tasten|Maustaste]] (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 des [[Mauszeiger]]s auf das Objekt und Drücken einer der Tasten eingeleitet. Eine [[Markierung (Informatik)|Auswahl]] des 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“ (''ribbon'' oder ''Markierungsrechteck'', Visualisierungsersatz für gedrückte [[Umschalttaste]]). 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 eine [[Einfügemarke]] eingeblendet oder eine Lücke geschaffen, wo das gezogene Element platziert werden wird. Beim Ziehen einer Datei auf ein Ordner-[[Icon (Computer)|Icon]] kann mittels kleiner Symbole kenntlich gemacht werden, ob die Datei einfach verschoben, kopiert oder eine [[Dateiverknüpfung|Verknüpfung]] der Datei erzeugt wird.

Manche Anwendungen ermöglichen das Öffnen und/oder Sichtbar-Machen von verdeckten Inhalten, wenn der Benutzer mit dem [[Cursor]] einen Moment auf geschlossenen oder halb verdeckten Objekten verharrt, etwa [[Aktives Fenster|Aktivieren 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 (deutsch ''loslassen'' oder ''fallen 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 die ''Sanduhr'' oder andere [[Fortschrittsanzeige]]n.

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 als [[Dialogfenster]].

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 der [[Bildbearbeitung]]
* Hantieren an Pfaden einer [[Vektorgrafik]]
* GIS-Funktion des [[Panning (Computer)|Panning]] zum Verschieben einer Karte
* Bewegen eines Datei-Symbols des Desktops auf eine Internetseite, um einen [[Upload]]-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 in [[Website|Internetseiten]] umzusetzen, zu. Dies ist oft nur mit clientseitigen Scriptsprachen wie [[JavaScript]] möglich. Sowohl Browserhersteller wie [[Microsoft]] mit dem ''dataTransfer-Object''<ref>{{Internetquelle |url=http://msdn.microsoft.com/en-us/library/ms535861(VS.85).aspx |titel=dataTransfer-Object |werk=msdn.microsoft.com |sprache=en |archiv-url=https://web.archive.org/web/20140907072649/http://msdn.microsoft.com/en-us/library/ms535861(VS.85).aspx |archiv-datum=2014-09-07 |abruf=2022-09-09}}</ref><ref>{{Internetquelle |url=https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer |titel=DataTransfer |werk=developer.mozilla.org |sprache=en |abruf=2026-03-09}}</ref> als auch verschiedene [[Webentwickler]] versuchten 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 bei [[Jugend forscht]] vorgestellt<ref>{{Internetquelle |url=https://www.jugend-forscht.de/index.php/projectsearch/detail/6038.1914 |titel=Konrad-Zuse-Jugendpreis für Informatik der Eduard-Rhein-Stiftung |werk=jugend-forscht.de |archiv-url=https://web.archive.org/web/20081205013109/https://www.jugend-forscht.de/index.php/projectsearch/detail/6038.1914 |archiv-datum=2008-12-05 |abruf=2026-03-09}}</ref> und unter anderem von der [[Eduard-Rhein-Stiftung]] mit dem [[Konrad-Zuse-Jugendpreis]] ausgezeichnet.

Insbesondere das gleichzeitige Ziehen verschiedener Elemente und die [[#Anzeige einer Drop-Möglichkeit|Anzeige einer Drop-Möglichkeit]] war 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. [[#Anzeige einer Drop-Möglichkeit|oben]]). Mit [[HTML5]] wurde erstmals versucht, eine standardisierte und native Drag-and-Drop-Funktionalität bereitzustellen.<ref>{{Internetquelle |url=http://html5demos.com/drag |titel=Drag and Drop mit HTML 5 (Demo) |werk=html5demos.com |sprache=en |archiv-url=https://web.archive.org/web/20090628012655/http://html5demos.com/drag |archiv-datum=2009-06-28 |abruf=2022-09-09}}</ref>

Web-Frameworks wie [[jQuery]] stellen ebenfalls eine Lösung für vollständige Drag-and-Drop-Aktionen zur Verfügung.

== Weblinks ==
* ''[https://learn.microsoft.com/de-de/dotnet/desktop/winforms/advanced/walkthrough-performing-a-drag-and-drop-operation-in-windows-forms Drag and Drop mit C#/VB.NET]''
* ''[https://docs.oracle.com/javase/tutorial/uiswing/dnd/intro.html Drag and Drop mit Java]'' (englisch)
* ''[https://html.spec.whatwg.org/#dnd Drag and Drop in HTML 5]'' (englisch)
* ''[https://learn.microsoft.com/de-de/dotnet/desktop/wpf/advanced/drag-and-drop-overview Übersicht über Drag & Drop]'' im [[MSDN]]

== Einzelnachweise ==
<references />

[[Kategorie:Grafische Benutzeroberfläche]]
[[Kategorie:Englische Phrase]]

Drag and Drop - Versionsgeschichte

imported>Siegbert v2: Archivversion für tote Links / Form