Google Chrome & Microsoft Edge: Drag&Drop-Verhalten soll geändert werden
von Olli | 13 Kommentare
Habt ihr schon mal ein Formular auf einer Webseite ausgefüllt, das einen Upload einer Datei erforderte. Ja? Dann kennt ihr vielleicht folgendes Problem: Ihr habt mühsam alle Daten in das Formular eingetragen, vielleicht auch eine längere Begründung für irgendwas in ein Textfeld eingetragen und möchtet nun die Datei hochladen. Upload-Boxen geben euch meist die Möglichkeit, die Datei entweder über ein Auswahlfeld aus dem Explorer oder Finder auszuwählen oder eben per Drag&Drop einfach auf die Box zu ziehen. Lässt man nun versehentlich die Maustaste zu früh los oder trifft das Feld nicht genau, öffnet der Browser die Datei in dem Tab, in dem ihr gerade hart gearbeitet habt. Zack – alle Daten weg.
Der Microsoft-Edge-Entwickler Eric Lawrence hat nun einen kleinen aber wichtigen Commit im Chromium-Gerrit abgesetzt, der genau das Problem adressiert. Dateien, die aus Versehen fallen gelassen werden, werden demnächst in einem neuen Tab geöffnet. Damit behaltet ihr die eingegebenen Daten und könnt einen neuen Versuch starten. Das Öffnen im selben Tab soll aber auf Wunsch immer noch möglich bleiben.
Users can easily lose work if they drag/drop a file or URL into a tab that does not consume the dropped data (e.g. as a file upload). Rather than navigating the current tab (blowing away whatever was in it), instead open the dropped URL in a new foreground tab.
Der Commit ist bereits in der Canary-Version von Chrome (Version 85.0.4163.0) verfügbar, sollte zeitnah auch in den Testversionen von Edge landen. In ein paar Wochen wird das Ganze dann in den finalen Versionen verfügbar sein.
In Chromium 85, dragging and dropping a file to a content area that doesn't handle it (e.g. uploading it) will no longer navigate that tab away to show the dropped file. It will instead open a new tab. https://t.co/9APCxS6wvb
— Eric Lawrence ? (@ericlaw) June 3, 2020
Wird geladen ...
Das ist zu begrüßen. Allerdings fängt ein aufmerksamer Entwickler Drop-Events außerhalb des Zielfeldes ab und terminiert den Event. Seiten, die das oben beschriebene Problem haben, sind letztlich nicht sauber/benutzerfreundlich realisiert.
Das hat doch nichts mit der Seite zu tun. Der Chrome unterstützt von Haus aus Darg&Drop. So kann ich bspw. wie bei jedem anderen Browser einfach ein PDF zur ansicht in das Fenster ziehen.
Gibt es nun ein Uploadfeld und ich „treffe“ diese nicht beim Reinziehen der Datei, lädt der Browser die Datei ganz normal zur Ansicht, aber halt im aktuell aktiven Tab. Jetzt soll hingegen ein neuer Tab geöffnet werden. Da kann der Entwickler der Seite sicher nicht das native Anwendungsverhalten des Browsers manipulieren.
Doch natürlich kann das der Entwickler machen. Statt die Drop-Events direkt an das Dropfeld zu hängen, nimmt man z.B. den document body und arbeitet quasi mit einem „relayed event“. D.h. wenn der Event getriggert wird (weil irgendwo in der Seite etwas gedropped wird), prüft man, ob das event target tatsächlich das Dropfeld ist; wenn nicht kann man den Event über preventDefault() canceln und das Standardverhalten des Browsers (Datei öffnen) wird unterdrückt.
»und das Standardverhalten des Browsers (Datei öffnen) wird unterdrückt.«
Und genau sowas sollte man als Entwickler möglichst vermeiden. Invasives eingreifen in das Browserverhalten gilt als ganz übles Dark Pattern und sollte nur in Ausnahmefällen vorgenommen werden. Das ist definitiv keiner.
Kann es sein dass, wenn so etwas wie von Oliver oben beschrieben passiert, oft hilft einfach in der Browser Historie einen Schritt zurück zu gehen? Also idealerweise einfach die Zurück/Back – Taste auf der Tastatur oder natürlich den entsprechenden Button im Browser.
Habe dies hier mal eben beim schreiben des Kommentar getestet: einfach rechts einen der MyDealz Links geöffnet und dann die Zurücktaste – mein Kommentar ist dann noch im Formular vorhanden. Klappt natürchlich nicht auf jeder Seite.
Ja, das geht bei einigen Seiten. Muss das Formular aber unterstützen.
Aber immerhin unterstützt das euer Kommentar Eingabefeld hier. Oder ist es doch einfach nur ein Browser-Feature beim zurück (Alt-Links) die Seite nicht neu zu laden und daher die Inhalte noch zu haben?
Nein. Die Formulardaten landen wie die Seite im Cache, das muss das Formular nicht extra unterstützen. Probleme kann es geben, wenn man auf eine andere Domain geht (neuer SSL-Handshake), bei komplizierteren Formularen, wenn der Entwickler die Caching-Header entfernt, usw.
In FF gibt es die Möglichkeit immer alles in einem neuen Tab öffnen zu lassen. Sei es aus der Adresszeile, per Drag&Drop etc. Und das ohne Festhalten einer Umschalttaste.
Weshalb der FF de facto immer noch der beste Browser ist. :))
Kannst du mir bitte sagen, wo man das einstellt? Habe gerade eine PDF Datei in meinen Firefox gezogen und sie wurde nicht in einem neuen Tab geöffnet.
Im Prinzip sind es die Einstellungen unter General->Tabs und zusätzlich in about:config browser.urlbar.openintab, browser.search.openintab, browser.tabs.loadBookmarksInTabs, browser.tabs.insertAfterCurrent, browser.tabs.insertRelatedAfterCurrent, browser.tabs. Alles auf true.
Was die einzelnen Settings bedeuten, aknnst du ggf. ergoogeln.
„browser.tabs“ am Ende des Satzes ignorieren. Verschreiber.
Eines dieser Probleme dass man kennt aber nur über eine Lösung dafür nachgedacht hat. Schön.