it-swarm.com.de

Visuell anzeigen, dass eine Website Drag & Drop unterstützt?

Ich baue ein System auf, das das Hochladen von Dateien erfordert, und ich frage mich, wie ich angeben kann, dass das Browserfenster Drag & Drop unterstützt. Da die Funktion für moderne Browser neu ist, gibt es keine Benutzererwartung für diese Funktion.

Ich dachte darüber nach:

[UPLOAD BUTTON]

|---------------------------|
|--Drag files here----------|
|---------------------------|
|---------------------------|

mit einem Farbeffekt auf den Drag-Bereich, aber das scheint nur unelegant. Ich könnte den Upload-Button mit einem Tooltip versehen, aber das kann ärgerlich werden, wenn er zu schnell angezeigt wird, und er kann nutzlos sein, wenn er nicht schnell genug angezeigt wird.

Gedanken?

6
Stefan Kendall

Ein Feld mit einer gepunkteten Linie könnte ein netter Hinweis darauf sein, dass Dateien zum Hochladen gezogen werden können. Die "Dateien hierher ziehen", wie Sie erwähnt haben, ist wahrscheinlich auch sehr nützlich. Box.net macht so etwas für das Massen-Upload und Sie möchten vielleicht einen Blick auf das JQuery-Plugin pluload werfen: http://www.plupload.com/example_queuewidget.php

Box.net Drag Drop Upload

9
Geert

Imgur macht es mit einer Schaltfläche "Datei hochladen" und einem Text, der Drag & Drop sagt. Google Mail und Outlook 2011 für Mac tun dies auf die gleiche Weise: Geben Sie beim Ziehen einer Datei einen Umriss oder eine andere Hintergrund-/Rahmenfarbe an.

Ich denke, die gepunktete Linie oder die Änderung von Rand/Hintergrund ist derzeit das häufigste Muster. Ich bin nicht sicher, wie Benutzer dadurch visuell wissen, dass sie ziehen sollen (im Gegensatz zur Verwendung der Upload-Schaltfläche), aber sobald sie es versuchen/versehentlich erhalten, scheint das Muster konsistent zu sein.

1
Elyse Holladay

Ich würde nur als ersten Schritt mit Text gehen. Sie können hinzufügen, von wo Personen die Dateien ziehen sollen. Zum Beispiel: "Ziehen Sie Dateien von Ihrem Desktop hierher und legen Sie sie dort ab".

Der Hinweis kann in Browsern ausgeblendet werden, die diese Funktion nicht unterstützen.

Die Farbänderung des aktiven Bereichs funktioniert einwandfrei. E. G. in Google Mail. Wenn ein Benutzer bereits eine Datei an seine Maus angehängt hat.

                                           .
                                 Drop the file(s) here
                                           .
0
erikrojo