it-swarm-ja.com

ドラッグアンドドロップ操作のドロップ部分の一般的なイディオムは何ですか?

ここでは、D%D演算の残りの半分であるドロップのみを懸念しています。ドロップできるユーザーと通信するための一般的なイディオムは何ですか?そして、どれが「最高」で、どのような状況で?

特に、ドラッグが発生する前と発生した後の両方でユーザーに何かを伝えるものを知りたいです。これらは、視覚的または「触覚的」(マウスカーソルの変更)にすることができます。

12
shemnon
  • 可能なドロップターゲットを示します
  • 結果のライブプレビューを表示する
  • ドラッグされているものをリアルタイムで表示する

alt text

  • どこかにドロップできない場合は、カーソルの近くにあるポップアップでユーザーに理由を説明します。

alt text

  • ドロップターゲットを大きく保つ!ドラッグアンドドロップは、フリッツの法則にすでに違反しています。悪化させる必要はありません。
5
Robert Fraser

ドロップできる場所の概要を示すアプリを見てきました。

これはwordpressウィジェットページからのものです

Wordpress widget page
(ソース: srulytaber.com

10
Sruly

一般的なアプローチは、他のすべての上にカーソルがあるときにカーソルを「ドロップできない」カーソルに変えることです。

ロジックは次のようになります。

  1. ドラッグを開始します。
  2. カーソルを「ドロップできません」に変えます。
  3. ドラッグ中に、ドロップを受け入れることができるものの上にあるかどうかを確認し、カーソルを「ドロップできる」に変えます。
  4. カーソルをドロップしてリセットします。

注:私は必ずしもこれを主張しているわけではありませんが、ドラッグ/ドロップ操作の最中であること、およびドロップが有効な場所を示していることをユーザーに示しています。

7
ChrisF

ユーザーがアイテムをドラッグするとすぐに、ドロップ位置を少し強調表示できます。このようにして、ドロップ位置に注意を引くことができます。

これの前提条件はもちろん、最初に何がドラッグ可能かを示すことです。そこに答えのあるこの質問 そのためです。

5
Gamlor

ドロップターゲットが線形配置オブジェクトのセット内にある場合があります。アイテムがドロップされると、ドロップターゲットに続くオブジェクトが移動して、新しいオブジェクトのためのスペースができます。その場合、スペースを作るために分離する2つのオブジェクトの間に挿入ポイントは通常細い線で示されますです。

たとえば、マウスを使用するほとんどすべてのGUIでは、テキストを選択して、ドキュメントのある部分から別の部分にドラッグできます。挿入ポイントは、2つの文字の間に細い線で示されます。

これは、前述のNetflixキューの場合も同様です。細い線に加えて、Netflixは黒い矢印を使用して映画の行き先を示します。

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(ドラッグ中にスクリーンショットを取得する方法がわかりません。)

3

ドロップの一般的なワークフローは次のとおりです。

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of Origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

ドロップハイライトの一般的なタイプは次のとおりです。

  • コンテナー(スクロールビューなど)の周りに輪郭を描き、有効なドロップターゲットであることを示します
  • アイテムが間または後にドロップされるリストアイテムまたはテキスト文字を示す挿入マーク
  • ドロップが最終的にinsideアイテムになることを示す、アイコンの選択されたバリアント(またはフォルダーアイコンなどの「折りたたまれた開いた」バリアント)。アイテムの前後ではありません。

挿入マークは、アイテムの順序を自由に再配置できるリストだけでなく、並べ替えられたリスト(たとえば、ソートされたリスト内の2つのファイル間のドロップは完全に有効ですが、ソート後、ファイルがさらに下に表示されることを示す必要があります。

完全を期すために、ドラッグの一般的なワークフローは次のとおりです。

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(少なくともこれは、最近のMac OS Xアプリで通常ドラッグアンドドロップが発生する方法ですが、ドロップ中にドラッグイメージを更新することはかなり新しいことです)

2
uliwitness