【D&D】【プログラム】ドラッグアンドドロップアプリを作るときの大きな考え方のポイント【JSの例】


初めに

Java アプリケーション、 JS、 windows C6.0  C#などで
ウインドウアプリを作ったときに、
幾度となく D&Dのインタフェースを作ってきました。

その時に掴んできた、考え方のコツをざっと俯瞰できるように、
大きなポイントを書いておきます。

ドラッグアンドドロップは使いやすい UIとしてとても重要ですからね。

検討ポイント

ドラッグされる側とデータ保持側を意識する。

まず最初に整理したいことは、
データを受け入れる側と、
(ドラッグされるデータと)もともとデータを保持していた側
それぞれを意識します。

  • データ元保持側
  • 受け入れ側

掴まれるデータ側は、

ドロップ対象というマークを付け、
その準備でOSやブラウザに処理をしてもらう。

ドラッグされたら データをくっつける。
text/plain だったり  setText()関数があるはず。

ドロップ成功か、 失敗キャンセルの処理を入れる。

最低限これだけ

データを受け入れてドロップされる側:

ドロップされたらデータを受け取るだけ

ドラッグ受入れ対象であれば、
許可するフォーマットとタイプ(copy / move / link / allなど)を
指定しておく。→drag over イベント

最低限これだけ、

使いやすくするもう一歩のがんばりどころ。

上記だけで動きますが、ユーザ操作が受け入れられているのかどうか
少しわかりにくいので、実際にはもう少し対応することが一般的です。

ドラッグされるデータ側

ドラッグ開始時に、ドラッグする側は、何をドラッグ中か
オブジェクトの透明コピーウインドウを作ります。
OSやブラウザがある程度やってくれることが多い。

ドロップされる側は、

ドロップ範囲に来たら、D&Dできますよという情報
(薄く表示したり、点線で範囲を表示したり)を
そのエリアに表示する。

または、もしそこでドロップしたら
間にこんな感じで入りますよという未来状態の例示を行う。

ドラッグ領域から出たらその表示をクリアする。

ドラッグ開始時に、連携して
ドラッグされたオブジェと管理側と、通信して、
ここにドロップできるよという表示をしてもいい。

データのオブジェクトタイプ

ドラッグ可能なデータは、
フォーマット形式がリストになっていて、
複数保持できます。

また、それぞれはテキスト、URL 、イメージ、
独自フォーマット、など設定できます。
EXCELの場合や HTMLのテーブルの場合など、
ここに大量の多様なデータが載ってます。

D&Dのプログラムに慣れないうちは
テキスト(文字列)からやってもいいと思います。

実際のデータは、セキュリティ上他のプロセス等に直接には渡せず、
D&Dのこの中間データ経由で行います。
その時、実際どんなデータをやり取りするか、
ドラッグする側される側で連携します。

される側は、のっかてきたときやドロップされたときに、フォーマットタイプや装飾キーを、リアルタイムでちょくちょく確認し、表示内容を変更します。
(Exploer / Excelでいうと ファイルやセルをドラッグ中に Ctrl キーが押されていたらコピー(+マーク)を表示するなど)

おさらい

抽象的すぎるとわかりずらいので、
JSのイベントを例にざっと流れをおさらいします。

イベント タイミング 対象者  考え方・対処ポイント
drop データのドロップ 受け入れ側 (必須)
OS/ブラウザ経由でもらった
データを処理する。
dragover データの到着直前 受け入れ側 (必須)
許可できるデータタイプか確認して反応する
drag または dragstart ドラッグ開始 データ元保持側 (必須)
渡したいデータをセットして、OSなどに任せる準備をする。
dragstart ドラッグ開始 データ元保持側 (UI上できれば)
掴んだデータイメージを 表示させる。例えば半透明のイメージなど(ブラウザやOSがある程度やってくれる)
dragstart ドラッグ開始 受け入れ側 (UI上場合によって)
受け入れ準備として、ドラック可能表示をしてもいい。同じアプリ内でないと実現は規格の準備が必要となり実現は難しい。
dragend ドラッグ終了 データ元保持側 (UI上できれば)
渡したデータの後処理を行う。こちら側のデータを消すとか。これがないと様にならない。COPYやリンクコピーの場合不要になる。
dragenter
dragleave
データの到着直前 受け入れ側

(UI上できれば)

ドラッグ可能エリアの情報や、受け入れ可能な情報を表示する。出るときは解除する。

dragover データの到着直前 受け入れ側 (UI上できれば)
受け入れられるドロップデータが来たらどうのようになるか例示する。

他の言語ではデータ構造は違うかもしれませんが、
基本的な考慮ポイントは同じだと思います。

見通しをよくすると、効率よく気楽に作れるし、
分担や調査、スケジュールもやりやすくなります。

JS(Firefox MDN)の場合

ドラッグ操作 - DragDrop | MDN

  1. ドラッグ元のドラッグ対象にマークを付ける。
    1. draggable = true   :HTMLタグ内
    2. drag開始イベントを付ける ondragstart:HTMLタグ内でJSを設定
  2. dragover/dropイベントをドラッグ先のエリアにつける:HTMLタグ内でJSを設定
  3. それぞれのイベント内で、データをやりとり
    • event.dataTransfer.getData("text/plain");  
      のようにJS上でsetter/getterで指定したデータタイプの情報をやり取りできます。

一応これだけで、できるようになります。

それでは

それでは、使いやすいUIができることを祈って、  Good luck! 🤞🏼

関連リンク

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

55 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です