ライブドラッギング

オブジェクトをドラッグしている間、ポインターの動きに合わせて対象をリアルタイムに変化／移動させる。
理由：ドラッグ操作の過程を視覚化して、直接操作の感覚を強めるため。

効能

• ドラッグ操作によって、画面のどこがどのように変化するのか分かる。
• ドラッグ中、どこで手をはなせば（ドロップすれば）期待する結果が得られるのか分かる。

用法

• デスクトップのアイコン、リスト内の選択行、画面内の特定のブロック、スクロールサム、ウィンドウの枠、フレキシブルペイン間のスプリッターなどをドラッグして移動できるようにする場合、ドラッグ中に被ドラッグオブジェクトをポインターの動きについてくるように描画する。
• ウィンドウ、ペイン、リストの列幅のリサイズ時に、内容物のレイアウトも小刻みに再描画し、リアルタイムに変化が見えるようにする。
• オブジェクトをドラッグ中、ドロップ不可の場所でマウスアップした場合、ドラッグ操作が無効になって、オブジェクトが元の場所に自動的に帰るようなアニメーションによる補完表現をとると一層効果的。ツリービューなどで、ドロップ先のフォルダにオブジェクトが吸い込まれるような視覚効果を出したい場合も同様。
• ドラッグ可能なオブジェクトにマウスオーバーした際や、ドラッグ中にドロップ不可の場所にマウスオーバーした際などには、マウスポインターの形状変化の表現をとる。

注意書き

• OSなどプラットフォームのAPIを使ってドラッグ操作を可能にする場合、ドラッグ中に変化状態がリアルタイムに描画されるかどうかはそのプラットフォームの仕様に依存する。
• ライブドラッギングによって画面の広範囲が変化する場合、小刻みな再描画処理が足かせとなって操作性が悪くなる恐れがある。その場合、可能であれば、ドラッグ中はオブジェクトの輪郭だけを変化／移動させる。

蘊蓄

以前はドラッグ中に変化の内容を高速に再描画するのが難しかったため、オブジェクトの輪郭だけをリアルタイムに変化／移動させ、ドロップした時に必要箇所全体を再描画するという方法が一般的だった。しかし最近はコンピュータの処理能力が高まったため、より直接操作感のあるライブドラッギングが一般的となっている。

例えば以前であれば、スクロールサムをドラッグしている間、スクロールサムの輪郭だけがポインターについて来て、スクロールの対象となるウィンドウの内容やリストボックスの内容は、ドロップ（マウスアップ）した時に再描画されていた。ウィンドウやアイコンの移動時も同様。

しかしドロップするまで結果が分からないと、スクロールしすぎてしまったり、ウィンドウを広げすぎてしまったりするので、不便だった。ライブドラッギング（ライブスクロール）をスムーズに描画することで、この問題が解決する。

つまり「ドラッグ」と「ライブドラッグ」の違いは、「ドラッグ中に変化箇所を完全描画するかどうか」であり、これは単に、描画速度が十分出せるかどうかで、どちらを採用するか判断すればよい。スムーズに描画できるのなら、ライブドラッグの方が望ましい。（ただし、変化の過程がすべてリアルタイムに表示されると、変化の情報量が多すぎて、少し気持ちが悪いという人もいる。これは、例えば 3DCG のリアリティが高すぎるとかえって不自然に感じるという現象と似ているかもしれない。）

ところで、ライブドラッグをしている間、被ドラッグオブジェクトを半透明に描画すると、どのオブジェクトがドラッグ中であることが示唆されて見栄えがよい。しかし現実世界では、例えばコーヒーカップを手で持ち上げて移動中にそれが半透明になったら恐い。つまり半透明にする演出は、かえって直接操作感を阻害しているとも言える。

Mac を見てみると、デスクトップでアイコンをドラッグしている時にはアイコンが半透明になる。そしてドロップするまで元の場所にもアイコンが表示されている。一方、ウィンドウをドラッグで移動しているような場合は半透明にならず、元の場所にウィンドウは残らない。つまり前者は、ドロップするまでそのドラッグ操作が有効かどうか確定していない（たとえばメニューバー上にドロップするとドラッグが無効となる）ことを表し、後者は、現実世界と同様に、ドラッグ操作がリアルタイムに有効になっていることを表している。

ライブドラッギングの視覚効果を実装する場合は、この二つの違いに注意する必要があるだろう。