web-dev-qa-db-ja.com

ドラッグ&ドロップの可能性を視覚化する方法は?

私のWebアプリケーションには、ドラッグアンドドロップでソートできる要素のリストが含まれています。この機能をユーザーに視覚的に表現するにはどうすればよいですか?

56
Witek

ドラッグ可能なことを示すために、「グリップ可能な」テクスチャを使用しました。 Gmailのテクスチャは次のとおりです。

enter image description here

37
Ken Mohnkern

数年前に Netflix からSean KaneがDVDキューがどのように機能するかを説明したプレゼンテーションを見ました。可能であれば、それを勉強する必要があります(アカウントを持っているか、アカウントを持っている人を知っている場合)。

注意すべきいくつかの点:

  • 彼は、デフォルトの移動カーソルはうまくテストできなかったので、 GoodEnough で示唆されているように、グラブカーソルに切り替えました。

  • ドラッグアンドドロップはプログレッシブ拡張機能です。リストの順序列のテキストボックスに入力して、並べ替えることもできます。多くのユーザーは、ドラッグアンドドロップ機能が利用できることに気づくことはありません。

  • ドラッグハンドルはありません。行のどこでもマウスダウンでドラッグを開始できます(リンクなどの別のオブジェクトがフォアグラウンドにある場合を除く)。 。

27

アイテムをドラッグアンドドロップできることを意味する、3本の水平線が上に重なった標準のアイコンがあります。

これは「摩擦」または「ハンドル」を意味し、ウィンドウまたはテキストボックスの右下隅にある対角線に似ていて、サイズを変更できます。

14
Dan Barak

移動カーソルは、Webアプリのドラッグ可能なアイテムで一般的に使用されます。

css:

cursor:move;
11
Sruly

小さな握りの手(ホバリング時に開く、ドラッグ中に閉じる)を使用することをお勧めします。つかむことができるようなグリップアイコン(ハンドル)を用意します(Gmailでは、1組のドット列(列あたり4ドット)です)。

また、新しいユーザー(または新機能の場合は既存のユーザー)に動作を示す小さなアニメーションを追加することをお勧めします。ユーザーがアプリにアクセスするたびに常にアニメーションを表示しないでください。

6
mbillard

ドラッグはドラッグです。いくつかのドラッグアンドドロップUIの改良を最近終えた後、私は実際に、次回は一種の「クリックアンドドロップ」に変更するという結論に達しました。移動するアイテムをクリックして選択する各アイテムにウィジェットを配置します。次に、行きたい場所をクリックします。これはこれまでのテストでうまくいっているようです。

5
Robert Fisher

ドラッグ可能なオブジェクトの上にカーソルを移動すると、開いた手の形に変わります。オブジェクトをつかむときは、つかむ手に変えてください。オブジェクトをつかんでいる間、許可されたドロップゾーンを他の背景から強調することができます(つまり、シェーディングまたはカラーリングによって)。

1
txwikinger

ユニバーサルワールプールシンボルは?.

私が使用しているデスクトップアプリケーションでは、アプリケーションの外部にあるファイルをドラッグできます。ドラッグアンドドロップを許可する特定のアプリケーションには、通常、ドロップ領域またはコンテンツペインがあります。音楽プレーヤーのプレイリストのようです。ドラッグアンドドロップの使いやすさは進歩的な開示ですが、一部のユーザーは直感的に理解することができません。そのような場合、私がドロップ領域を宣伝するために考えられる最高のことは、渦のシンボルの背景を持つことです。

0
Vishnu Prasanth

私はデスクトップアプリケーションで自分でこの問題に直面しています。現時点で私が思いつくことができる最善の解決策は、ホバーに矢印を置くことです。矢印は、オブジェクトをドラッグできる場所を指し、ドラッグアンドドロップなどのテキストが表示されます。

0
James Ludlow