もう１回ゆっくり読み直さないと詳細は理解できなさそう。
とりあえず大事なのは
- ユーザがドラッグを始めたらブラウザが drag data store にデータを追加する
- drag data store は直接触れない
- drag data store にアクセスするために使うのが dataTransfer インタフェース
- dataTransfer インタフェースは DOM に発行されるドラッグイベントに付加される
- ファイルシステムや他のアプリケーションからドラッグするため、OSに依存して動作が変わる部分がある。（他のキーとの組み合わせが意味する操作とか）
といったところでしょうか。
以下翻訳メモ後半。
原文はこちら
http://www.w3.org/TR/2012/CR-html5-20121217/editing.html#dnd
------
7.7.4 DragEvent インタフェース
ドラッグ＆ドロップ処理モデルはいくつかのイベントを呼び出す。それらはすべて DragEvent インタフェースを使う。
[Constructor(DomString type, optional DragEventInit eventInitDict)]
interface DragEvent : MouseEvent {
readonly attribute DataTransfer? dataTransfer;
};
dictionary DragEventInit : EventInit {
// Attributes from UIEvent:
Window? view = null;
long detail = 0;
// Attributes for MouseEvent:
long screenX = 0;
long screenY = 0;
long clientX = 0;
long clientY = 0;
boolean ctrlKey = false;
boolean shiftKey = false;
boolean altKey = false;
boolean metaKey = false;
unsigned short button = 0;
unsigned short buttons = 0;
EventTarget? relatedTarget = null;
// Attributes for DragEvent:
DataTransfer? dataTransfer;
};
以下は非標準
----
event.dataTransfer：DataTransferオブジェクトを返す
----
DragEvent の dataTransfer は初期化された値を返さなければならない。オブジェクトが作られた時、この属性は null に初期化されなければならない。これはイベントにコンテキストを知らせるためにある。
ユーザエージェントが e という名前のドラッグアンドドロップイベントをエレメント上で実行することを要求した時、以下の手順で drag data store を使用しなければならない。
1. e が dragstart だったら drag data store mode を read/write モードにする
e が drop だったら drag data store mode を red-only モードにする
2. dataTransfer に新しく作られた drag data store と関連づいた DataTransfer を代入する。
3. effectAllowed に drag data store の drag data store allowed effects state を代入する
4. e が dragstart, drag, dragleave のいずれかだったら dropEffect に "none" を代入する。e が drop または dragend だったらcurrent drag operation と同じ値を代入する。その他は effectAllowed に基づいた値と drag-and-drop ソースによって、以下の表から与えられる値になる。
effectAllowed | dropEffect
"none" | "none"
"copy" | "copy"
"copyLink" | "copy" または "link"
"copyMove" | "copy" または "move"
"all" | "copy" または "link" または "move"
"link" | "link"
"linkMove" | "link" または "move"
"move" | "move"
"uninitialized" | "move" または "copy" または "link"
textfield 選択中|
"uninitialized" | "copy" か "link" か "move"
ドラッグ中 |
"uninitialized" | "link" か "copy" か "move"
a要素を選択中 | "link" か "copy" か "move"
それ以外のケース | "copy" か "link" か "move"
上の表以外で、ユーザエージェントのプラットフォームの慣習的なものがあれば、ユーザエージェントはそちらの操作をするかもしれない。
例えば、Windows の慣習では "alt" キーを押しながらドラッグしている間は、移動やコピーよりも、データをリンクさせることを意味する。従って、Windows では "alt" キーが押されている間は "copy" や "move" ではなく "link" となる。
5. 信頼された DragEvent を作成して e として初期化する。バブリングするか、キャンセル可能でない限り、 e は dragleave か dragend であり、detail 属性を 0 で初期化する。mouse と key 属性はユーザインタラクションを行う入力デバイスの状態によって初期化する。relatedTarget 属性は null で初期化する。dataTransfer 属性は DataTransfer 変数によって初期化する。DataTransfer オブジェクトは上で作成されている。
6. target 要素の DragEvent を通知する
7. drag data store allowed effects state に dataTransfer の effectAllowed 属性をセットする。（e が dragstart の場合だけ変更できる）
8. drag data store mode を最初のステップで変更していたら protected モードの戻す。
9. dataTransfer と drag data store の関係を切る
7.7.5 ドラッグ＆ドロップ処理モデル
ユーザがドラッグを開始した時、ユーザエージェントは下記のステップを処理しなければならない。以下のステップを実行するときには、ドラッグ開始地点が他のドキュメントやアプリケーションであり、どこでドラッグを開始されたのかを知ることができない場合であっても、実行しなくてはならない。
1. 以下の手順で何がドラッグされたのかを突き止める
選択によってドラッグが開始されたのであれば、選択から開始された。
そうではなく、Document からドラッグが開始されたのであれば、それはdraggable 属性が設定されているノードから先祖へと向かって参照していった先の、最初の要素である。draggable に設定された要素がなければ何もドラッグされていないため、以下のステップを中止してドラッグ＆ドロップ操作は行わない。
それ以外はユーザエージェントの外側からのドラッグである。何がドラッグされたのかはドラッグが開始されたドキュメントやアプリケーションによって定義される。
ノート：href属性を持っているimg要素とa要素はデフォルトでdraggable属性にtureを設定している。
2. drag data store を作成する。すべてのドラッグ＆ドロップイベントはこのセクションのステップの後に続いて発行され、drag data store を使わなければならない。
3. 以下の手順でどの DOM ノードがソースノードなのかを確証する。
ドラッグされたのが選択範囲なら、ユーザがドラッグを開始した Text ノードがソースノードである。ユーザがユーザエージェントに具体的なノードを通知していない場合は、ドラッグされた選択領域を含んでいる Text ノードがソースノードである。
それ以外で、DOM要素がドラッグされていたら、ソースノードはその要素である。
それ以外なら、ソースノードは他のドキュメントやアプリケーションの一部である。この仕様が、イベントがソースノードから発行されることを要求するとき、ユーザエージェントはプラットフォームの慣習やシチュエーションに合わせて適切なソースノードを決めなければならない。
ノート：ドラッグ＆ドロップ中はソースノードから複数のイベントが発行される。
4. 以下の手順でドラッグされたノード一覧を確定する
選択領域がドラッグされた場合は、ドラッグされたノード一覧は、選択領域の中に部分的に、または完全に含まれているノードの木構造である。（選択領域のすべての先祖を返す）
それ以外ならドラッグされたノード一覧はソースノードだけを含む。
5. 選択領域がドラッグされたのなら、drag data store item list に以下のプロパティをもつ要素を追加する。
The drag data item type string: "text/plain"
The drag data item kind: Unicode 文字列
The actual data: 選択した文字列
それ以外で、ファイルがドラッグされた場合は、drag data store item list に各ファイルの情報を元にしたプロパティを持つ要素を追加する。
The drag data item type string: ファイルの MIME type か "application/octet-stream"
The drag data item kind: File
The actual data: ファイルの中身と名前
ノート: 現在ではファイルはブラウザの外からしかドラッグできない
ドラッグがアプリケーションの外で始まった場合、ドラッグされたデータに相応しい（プラットフォームの慣習にあった）データを drag data store item list に追加しなければならない。プラットフォームが MIME types を使っていなかったとしても、ユーザエージェントは最も適切な MIME type を割り当てるよう試みなければならない。そして、すべてのケースで、drag data item type は ASCII コードの小文字でなければならない。
6. ドラッグアンドドロップ初期化ステップは他の使用で定義される。
7. 以下のサブステップを実行する
1. urls に絶対URL のカラリストを入れる
2. ドラッグされたノード一覧の各ノードに対して
ノードが href 属性付きの a 要素なら、href をリゾルブした URL を urls に追加する
ノードが src 属性付きの img 要素なら、src をリゾルブした URL をノードに追加する
3. urls が空のままなら、以下のステップは中止する
4. url にurls を改行で区切って連結した文字列を代入する。
5. drag data store item list に以下の手順にそってアイテムを追加する
type: text/uri-list
kind: Unicode文字列
data: url文字列
8. ユーザエージェントに合わせて適切な drag datastore store default feedback を更新する。
9. dragstart という名前でソースノードのドラッグ＆ドロップイベントを実行する
イベントがキャンセルされたら、ドラッグ＆ドロップイベントは発生せず、以下のステップを中止する。
メモ：イベントリスナ無しのイベントは、ほとんどの定義で、永遠にキャンセルされず、作者が意図して防がない限りユーザのためにドラッグ＆イベントは利用可能である。
10. 以下で説明しているようにして、プラットフォームの慣習に合わせてドラッグアンドロップを始める
ドラッグ＆ドロップフィードバックは以下の利用可能なソースによって生成されなければならない。
1. drag data store bitmap。このケースでは、drag data store hot spot coordinate がカーソルの位置を表すために使われなくてはならない。この値は CSS のleft と top として表現される。
2. drag data store default feedback
ユーザエージェントがドラッグ＆ドロップ処理を開始する瞬間から操作が終了するまで、デバイスのインプットイベント（マウスやキーボードイベント）は制限しなくてはならない。
ドラッグ操作中、immediate user selection と呼ばれるドロップターゲットがユーザによってエレメントへ直接指定される。（エレメントはユーザによってだけ選択されることができる。他のノードはドロップターゲットとして利用可能であってはならない）。しかしながら immediate user selection は current target element である必要はない。これはドラッグ＆ドロップ操作の中の一部である現在選択中のエレメントのことである。
immediate user selection はユーザが選択した別の要素として変更される（ポインティングデバイスで選択肢たり、他の方法を使う）。current target element は immediate user selection が変化した時に変化する。下記で説明する通り、ドキュメント内のイベントリスナの結果に基づく。
current target element も immediate user selection も null をとることができる。これはターゲットエレメントが選択されていないことを意味する。これらは別のドキュメントのエレメントをとることもできるし、他の（Webではない）プログラムのものでもよい。（例えばワードプロセッサから選択してきたテキストでも良い）。current target element は null で初期化される。
さらに、 current drag operation もあり、"none", "copy", "link", "move" を値として持つことができる。初期状態では "none" を持つ。これは下記の手順によってユーザエージェントが更新できる。
ユーザエージェントはドラッグ操作が始まったらすぐに初期化して、 350ms(±200ms) 毎にその後はドラッグ操作中以下のステップをタスクキューに追加し続けなければならない。
1. ユーザエージェントがまだ以前の処理を指定たら、次の処理が来た時、これらの処理を中断する。（フレームを飛ばす）
2. drag という名前のイベントをソースノードに対して実行する。このイベントがキャンセルされたら、 current drag operation を "none" にしなければならない。(ドラッグ操作は行われない)
3. drag イベントがキャンセルされておらず、ユーザのドラッグ＆ドロップ操作が終わっていなければ、ドラッグ＆ドロップ操作の状態を以下のステップでチェックする。
1. もしユーザが最後の処理よりも後で immediate user selection を変更し、それが current target element と同じではなかったら、current target element を以下の手順でアップデートする。
* 新しい immediate user selection が null だったら、current target element も null にする。
* 新しい immediate user selection が DOM ドキュメントかアプリケーションだったら、 current target element に immediate user selection を代入する
* それ以外だったら dragenter イベントを immediate user selection に対して発行する。
イベントがキャンセルされたら、current target element を immediate user selection にする。
それ以外なら、以下のリストから適切な処理を実行する。
- immediate user selection がテキストフィールド（例えばテキストエリやinput要素）または、editing host , editable 要素で、なおかつ drag data store item list が type = "text/plain" で kind が Unicode 文字列の要素を持っていたら、current target element を immediate user selection にセットする。
- immediate user selection が drop zone 属性を持っていて、 drag data store とマッチするなら、current target element を immediate user selection にセットする。
- immediate user selection が drop zone の先祖の要素であり、drag data store にマッチするなら、new target に直近の先祖エレメントを代入する。
もし、immediate user selection が new target だったら、current target element を変化させない。
それ以外なら、dragenter という名前のドラッグイベントを new target に対して発行する。current target element を new target にする。
- immediate user selection が body 要素だったら、current target element はそのままにする。
- それ以外なら、もし１つ以上のDocument オブジェクトが存在したら、dragenter イベントを body 要素に対して発行する。current target を body 要素にする。イベントがキャンセルされたかどうかは気にしない。
2. もし上のステップで current target element が変更されていて、なおかつ target element が null または DOM ドキュメントの一部なら gragleave イベントを直前の target element に対して発行する。
3. current target element が DOM なら、 dragover イベントを current target element に発行する。
dragover イベントがキャンセルされていなかったら、以下のリストから適切なものを実行する。
* current target element がテキストフィールド、editing host または editable 要素であり、drag data store item list の中に type が "text/plain"、kind がUnicode のアイテムがあったら、current drag operation を "copy" か "move" のどちらか適切な方にセットする。
* current target element が drop zone 属性を持つエレメントであり、 drag data store にマッチして、具体的な操作を持っていたら、 current drag operation を current target element の drop zone 属性にする。
* current target element が drop zone 属性を持っていて、drag data store にマッチして、具体的な操作を持っていなければ、 current drag operation に "copy" をセットする。
* それ以外なら、current drag operation を"none" にする。
それ以外（dragover イベントがキャンセルされた）なら、DragEvent オブジェクトの dataTransferオブジェクトの effectAllow と dropEffect属性に基づく値を current drag operation にセットする。イベント終了後に下の表のように鳴る。
effectAllowed | dropEffect | Drag operation
"uninitialized", "copy", "copyLink", "copyMove", "all" | "copy" | "copy"
"uninitialized", "link", "copyLInk" , "linkMove", "all" | "link" | "link"
"uninitialized", "move", "copyMove", "linkMove", "all" | "move" | "move"
それ以外 | "none"
4. それ以外なら、current target element が DOM 要素ではない場合、プラットフォームの具体的なメカニズムをドラッグオペレーションの判断のために使う。（none, copy, link, move）そして、current drag operation にそれをセットする。
5. ドラッグフィードバック（例えばマウスカーソル）を current drag operation に合わせて以下のように更新する。
Drag operation | Feedback
"copy" | ドロップしたらデータがコピーされる
"link" | ドロップしたらデータがリンクされる
"move" | ドロップしたらデータが移動される
"none" | 操作はなく、ドロップするとドラッグアンドドロップがキャンセルされる
4. それ以外で、ユーザがドラッグ＆ドロップ操作を終了した（例えばマウスボタンを離した）、または drag イベントがキャンセルされたら、これが最後の処理に鳴る。以下の手順で処理をして、ドラッグ＆ドロップ操作を終了する。
1. current drag operation が "none" だった、または、ユーザがドラッグ＆ドロップ操作をキャンセルした（例えば escape キーを押した）、または、current target element がnull だったら、ドラッグ操作は失敗する。以下のサブステップを実行する。
1. dropped を false にする。
2. current target element が DOM 要素だったら、dragleave イベントをその要素に発行する。そうではなく、current target element が null だったら、ドラッグをキャンセルするためにプラットフォームの慣習を使用する。
それ以外だったら、ドラッグ操作は成功する。以下のサブステップを実行する。
1. dropped を true にする
2. current target element が DOM 要素だったら、drop イベントを current target element に発行する。それ以外なら、dropを指定するためにプラットフォームの慣習を使用する。
3. イベントがキャンセルされたら、current drag operation に DragEvent オブジェクトの dataTransfer オブジェクト dropEffect 属性に基づく値をイベントが終了した後にセットする。
それ以外なら、イベントはキャンセルされない。以下のようにしてデフォルトの動作を実行する。
- もし current target element がテキストフィールド、 editing host 、 editable 要素のいずれかであり、かつ、typeが"text/plain"、kind が Unicode 文字列のアイテムが drag data store item list 内に存在していたら、実際のデータを drag data store item list の中に挿入する。その時、type を "text/plain"、kindをUnicode文字列、以下略。
- それ以外、current drag operation を "none" にする。
2. dragend イベントをソースノードに対して発行する
3. デフォルトの dragend イベントの動作として以下のリストの中から適切なものを実行する
0 件のコメント:
コメントを投稿