web-dev-qa-db-ja.com

Webサイトがドラッグアンドドロップをサポートしていることを視覚的に示していますか？

ファイルのアップロードを必要とするシステムを構築していますが、ブラウザウィンドウがドラッグアンドドロップをサポートしていることをどのように示すことができるのでしょうか。この機能は最新のブラウザでは新しいため、ユーザーがその機能を期待することはありません。

私はこれについて考えました：

[UPLOAD BUTTON]

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

ドラッグ領域に色の効果がありますが、それは単に洗練されていないようです。アップロードボタンをツールチップで表示することもできますが、表示が速すぎると煩わしくなり、表示が遅すぎると役に立たない場合があります。

考え？

user-behaviordrag-n-drophtml5
6
Stefan Kendall

点線のボックスは、ファイルをドラッグしてアップロードできることを示しています。あなたが言った「ここにファイルをドラッグ」はおそらく非常に便利です。 Box.netは、一括アップロードに対してそのようなことを行うので、jqueryプラグインのpluloadを確認することをお勧めします。 http://www.plupload.com/example_queuewidget.php

Box.net Drag Drop Upload

9
Geert

Imgur は、「ファイルのアップロード」ボタンとドラッグアンドドロップを示すテキストでそれを行います。 GmailとOutlook 2011 for Macも同じように動作します。ファイルをドラッグすると、アウトラインや異なる背景/境界線の色が表示されます。

現在、点線またはボーダー/ bgの変更が最も一般的なパターンだと思います。ドラッグする必要があることを（アップロードボタンを使用するのではなく）視覚的にどのようにユーザーに知らせるかはわかりませんが、一度試してみると、誤って取得すると、パターンに一貫性があるように見えます。

1
Elyse Holladay

最初のステップとしてのみテキストを使用します。ユーザーがファイルをドラッグする場所から追加できます。たとえば、「デスクトップからファイルをここにドラッグアンドドロップ」します。

この機能をサポートしていないブラウザでは、ヒントを非表示にできます。

アクティブな領域の色の変更は正常に機能します。 g。 Google Mail。ユーザーが既にマウスにファイルを添付している場合。

                                           .
                                 Drop the file(s) here
                                           .
0
erikrojo