HTML — drag&drop

【この訳に特有な表記規約】

◎表記記号

6.11. ~DnD

この節では、 ~eventに基づく~DnD( `drag-and-drop^en, 略して `DND^en )の仕組みを定義する。 ◎ This section defines an event-based drag-and-drop mechanism.

この仕様は、 実際の~DnD操作o 【 “引きずって~~落とす” 】 が正確に何であるかは,定義しない: ◎ This specification does not define exactly what a drag-and-drop operation actually is.

どう実装されていようが、 ~DnD操作oでは: ◎ However it is implemented, drag-and-drop operations\

  1. まず、 始点が~~存在するモノトスル (例: ~mouseが~clickされた所 / ~dragに先立って選択されていた[ 要素, または[ 選択~部分の始端 ]])。 ◎ must have a starting point (e.g. where the mouse was clicked, or the start of the selection or element that was selected for the drag),\
  2. 次に, 0 回以上の中間的な段が生じるモノトスル (例:[ ~drag中に~mouseが~~重なった要素 / 利用者がアリな~drop地点を巡回するに伴い,~~選んだ要素 ]に対し)。 ◎ may have any number of intermediate steps (elements that the mouse moves over during a drag, or elements that the user picks as possible drop points as they cycle through possibilities), and\
  3. 最後に、 取消されるか, または 終点が~~存在するモノトスル (例: ~mouse~buttonが解放された所の要素 / 最終的に選択された要素)。 終点は、 ~dropが生じる前のアリな~drop地点として,最後の要素を選択するモノトスル (よって,操作oが取消されなかった場合、 前項の中間的な段が 1 回は生じるモノトスル)。 ◎ must either have an end point (the element above which the mouse button was released, or the element that was finally selected), or be canceled. The end point must be the last element selected as a possible drop point before the drop occurs (so if the operation is not canceled, there must be at least one element in the middle step).

6.11.1. 序論

◎非規範的

要素を~drag可能にするためには、 要素に `draggable$a 属性を付与した上で, `dragstart$et ~event用に~event~listenerを設定する。 ~dragされている~dataは、 この~eventに~storeされる。 ◎ To make an element draggable, give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged.

~event~handlerは、 概して,次を行う必要がある:

  1. ~drag対象が~text選択でないことを検査して,
  2. ~dataを `DataTransfer$I ~objの中に~storeして,
  3. 許容される効果 (複製-, 移動-, ~link, これらの組合n) を設定する。
◎ The event handler typically needs to check that it's not a text selection that is being dragged, and then needs to store data into the DataTransfer object and set the allowed effects (copy, move, link, or some combination).

例えば: ◎ For example:

<p>好きな果物は?</p>
<ol ondragstart="dragStartHandler(event)">
 <li draggable="true" data-value="果物.林檎">りんご</li>
 <li draggable="true" data-value="果物.蜜柑">みかん</li>
 <li draggable="true" data-value="果物.桃">もも</li>
</ol>
<script>
  var %internalDNDType
      = 'text/x-example'; // `~siteに特有な何かに設定する^cm
  function dragStartHandler(%event) {
    if (%event.target instanceof HTMLLIElement) {
      // `要素の data-value 属性を,~dragされる値に利用する:^cm
      %event.dataTransfer.setData(
          %internalDNDType,
          %event.target.`dataset$m.value
      );
      %event.dataTransfer.effectAllowed
          = 'move'; // `移動-のみ許容する^cm
    } else {
      %event.preventDefault(); // `選択の~dragは許容しない^cm
    }
  }
</script>

~drop~targetが~dropを受容するためには、 次に挙げる~eventを~listenする必要がある。 ◎ To accept a drop, the drop target has to listen to the following events:

  1. `dragenter$et ~event~handlerは、 その~eventを取消すことにより,~drop~targetは~dropを受容する用意があり得るかどうかを報告する。 ◎ The dragenter event handler reports whether or not the drop target is potentially willing to accept the drop, by canceling the event.
  2. `dragover$et ~event~handlerは、 ~eventに結付けられた `DataTransfer$I の `dropEffect$m 属性を設定することにより,利用者に示されることになる~feedbackを指定する。 この~eventも取消される必要がある。 ◎ The dragover event handler specifies what feedback will be shown to the user, by setting the dropEffect attribute of the DataTransfer associated with the event. This event also needs to be canceled.
  3. `drop$et ~event~handlerは、 その~dropを受容するか却下するかの,最終-機会cになる。 ~dropが受容された場合、 ~event~handlerは,~target上で~drop操作oを遂行するモノトスル。 ~sourceが `dropEffect$m 属性の値を利用できるようにするためには、 この~eventは取消される必要がある。 他の場合、 ~drop操作oは却下される。 【代わりに,~UAによる既定の動作が行われるであろう — ~dropされた~fileを開く,~textを~text~controlに挿入するなど。】 ◎ The drop event handler has a final chance to accept or reject the drop. If the drop is accepted, the event handler must perform the drop operation on the target. This event needs to be canceled, so that the dropEffect attribute's value can be used by the source. Otherwise, the drop operation is rejected.

例えば: ◎ For example:

<p>好みの果物を下に~dropしてください。</p>
<ol ondragenter="dragEnterHandler(%event)" ondragover="dragOverHandler(%event)"
    ondrop="dropHandler(%event)">
</ol>
<script>
  var %internalDNDType = 'text/x-example'; // `~siteに特有な何かに設定する^cm
  function dragEnterHandler(%event) {
    var %items = %event.dataTransfer.items;
    for (var %i = 0; %i < %items.length; ++i) {
      var %item = %items[%i];
      if (%item.kind == 'string' && %item.type == %internalDNDType) {
        %event.preventDefault();
        return;
      }
    }
  }
  function dragOverHandler(%event) {
    %event.dataTransfer.dropEffect = 'move';
    %event.preventDefault();
  }
  function dropHandler(%event) {
    var %li = document.createElement('li');
    var data = %event.dataTransfer.getData(%internalDNDType);
    if (%data == '果物.林檎') {
      %li.textContent = 'りんご';
    } else if (%data == '果物.蜜柑') {
      %li.textContent = 'みかん';
    } else if (%data == '果物.桃') {
      %li.textContent = 'もも';
    } else {
      %li.textContent = '未知な果物';
    }
    %event.target.appendChild(%li);
  }
</script>

`dragend$et ~eventを利用すれば、 元の要素(~dragされていたもの)を表示から除去できる。 ◎ To remove the original element (the one that was dragged) from the display, the dragend event can be used.

これまでの例で言えば、 その~eventを取扱うために,元の~markupを更新することを意味する: ◎ For our example here, that means updating the original markup to handle that event:

<p>好きな果物は?</p>
<ol ondragstart="dragStartHandler(%event)" ondragend="dragEndHandler(%event)">
 // `...前と同じ...^cm
</ol>
<script>
  function dragStartHandler(%event) {
    // `...前と同じ...^cm
  }
  function dragEndHandler(%event) {
    if (%event.dataTransfer.dropEffect == 'move') {
      // `~dragされている要素を除去する^cm
      %event.target.parentNode.removeChild(%event.target);
    }
  }
</script>

6.11.2. ~drag~data~store

~DnD操作oの下層~dataは, `~drag~data~store@ と呼ばれ、 次に挙げる各種~情報からなる 【括弧内には対応する~IDL属性も挙げる】 : ◎ The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:

`~item~list@ddS ( `items$m ) ◎ A drag data store item list,\
【 原文による呼称は “`drag data store item list^en” であるが、 この訳では, “`drag data store^en” の部分は省略する (この~pageの中では、 “~item~list” が他の何かを指すこともない)。 他の項目についても同様。 】

~dragされた~dataを表現している `~data~item@ ( `item^en )たちが成す~list — 各~data~itemは、 次に挙げる情報からなる: ◎ which is a list of items representing the dragged data, each consisting of the following information:

`種類@dI ( `kind$m ) ◎ The drag data item kind
~dataの種類を表す。 次に挙げるいずれかを値にとる ⇒# `Text^i :~text / `File^i :~filenameも伴われる~binary~data ◎ The kind of data: ◎ • Text •• Text. • File •• Binary data with a filename.
`型~文字列@dI ( `type$m ) ◎ The drag data item type string
~dataの型や形式を与える~Unicode文字列であり、 一般には`~MIME型$で与えられる。 `~MIME型$でない一部の値は、 旧来の理由のため,特別に扱われる。 ~APIでは`~MIME型$の利用は施行されないので、 他の値も利用できる。 いずれにせよ、 値は~APIにより`~ASCII小文字~化$される。 ◎ A Unicode string giving the type or format of the data, generally given by a MIME type. Some values that are not MIME types are special-cased for legacy reasons. The API does not enforce the use of MIME types; other values can be used as well. In all cases, however, the values are all converted to ASCII lowercase by the API.
`~data~item$のうち[ `種類$dI ~EQ `Text^i ]を満たすものは、 その`型~文字列$dIごとに【同じ`~item~list$ddS内で】 1 個までに制限される。 ◎ There is a limit of one text item per item type string.
`実際の~data@dI ◎ The actual data
~Unicodeまたは~binary文字列 — 一部の事例では、 `種類$dIに応じて†, ~filename(それ自体も~Unicode文字列)も伴われる††。 ◎ A Unicode or binary string, in some cases with a filename (itself a Unicode string), as per the drag data item kind.
【† すなわち、 `File^i の場合。 】【†† すなわち、 `files$m 取得子などの~API用に `File$I ~objを作成するために必要な情報 — 他にもあるはずだが(更新日など)、 言及されていない。 】

`~item~list$ddSを成す`~data~item$たちの順序は、 ~listに追加された順になる。 ◎ The drag data store item list is ordered in the order that the items were added to the list; most recently added last.

`既定の~feedback@ddS ( `dropEffect$m ) ◎ ↓
~UAにより定義される,既定の~feedbackを~~供する情報。 次項とともに,~drag中に~UI~feedbackを生成するときに利用される。 ◎ The following information, used to generate the UI feedback during the drag: ◎ User-agent-defined default feedback information, known as the drag data store default feedback.
`~bitmap@ddS と `~hot-spot座標@ddS ( `setDragImage()$m ) ◎ ↓
順に、 ~bitmap画像, および その中のある地点を指す座標。 いずれも省略可能。 ◎ Optionally, a bitmap image and the coordinate of a point within that image, known as the drag data store bitmap and drag data store hot spot coordinate.
【 例えば~cursor画像と,その~hot-spot。 】
`~mode@ddS ◎ A drag data store mode,\

`~drag~data~store$に対し行える操作oは、 ~modeに依存する。 次に挙げるいずれかを値にとる: ◎ which is one of the following:

`可書~mode@i ◎ Read/write mode
`dragstart$et ~event~~専用。 この~modeの下では、 新たな~dataを`~item~list$ddSに追加できる。 ◎ For the dragstart event. New data can be added to the drag data store.
`読専~mode@i ◎ Read-only mode
`drop$et ~event~~専用。 この~modeの下では、 `~item~list$ddS内の各`~data~item$を — その`実際の~data$dIも含めて — 読取れるが,新たな~dataは追加できない。 ◎ For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.
`保護d~mode@i ◎ Protected mode
他のすべての~event用。 この~modeの下では、 `~item~list$ddS内の各`~data~item$の形式と種類は列挙できるが、 それらの`実際の~data$dIは可用にされず,新たな~dataも追加できない。 ◎ For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.
`許容される効果state@ddS ( `effectAllowed$m ) ◎ A drag data store allowed effects state,\
文字列。 【`詳細@#_allowed-effect$】 ◎ which is a string.

どの`~drag~data~store$も,次の手続きで作成される ⇒ `~drag~data~storeを作成する@ ときは ⇒ ~RET 新たな`~drag~data~store$ — その ⇒# `~item~list$ddS ~SET 空な~list, `既定の~feedback$ddS ~SET ε(なし), `~bitmap$ddS ~SET ε, `~hot-spot座標$ddS ~SET ε, `~mode$ddS ~SET `保護d~mode$i, `許容される効果state$ddS ~SET `uninitialized$tE ◎ When a drag data store is created, it must be initialized such that its drag data store item list is empty, it has no drag data store default feedback, it has no drag data store bitmap and drag data store hot spot coordinate, its drag data store mode is protected mode, and its drag data store allowed effects state is the string "uninitialized".

6.11.3. `DataTransfer^I ~interface

`DataTransfer$I ~objは、 ~DnD操作oの下層`~drag~data~store$を ( `DragEvent$I ~obj上の `dataTransfer$m 属性を通して) 公開する。 ◎ DataTransfer objects are used to expose the drag data store that underlies a drag-and-drop operation.

[Exposed=Window]
interface `DataTransfer@I {
  `constructor@#dom-datatransfer$();

  attribute DOMString `dropEffect$m;
  attribute DOMString `effectAllowed$m;

  [SameObject] readonly attribute `DataTransferItemList$I `items$m;

  undefined `setDragImage$m(Element %image, long %x, long %y);

  /* 
旧~interface
◎
old interface
 */
  readonly attribute FrozenArray<DOMString> `types$m;
  DOMString `getData$m(DOMString %format);
  undefined `setData$m(DOMString %format, DOMString %data);
  undefined `clearData$m(optional DOMString %format);
  [SameObject] readonly attribute `FileList$I `files$m;
};
%dataTransfer = `new DataTransfer()$m
空な`~drag~data~store$を伴う,新たな `DataTransfer$I ~objを作成する。 ◎ Creates a new DataTransfer object with an empty drag data store.
%dataTransfer.`dropEffect$m [ = %value ]
現在~選択されている操作oの種類を返す。 操作oの種類が `effectAllowed$m 属性に許容されるものでない場合、 操作oは失敗することになる。 ◎ Returns the kind of operation that is currently selected. If the kind of operation isn't one of those that is allowed by the effectAllowed attribute, then the operation will fail.
設定して、 選択されている操作oを変更できる。 ◎ Can be set, to change the selected operation.
アリな値は ⇒ `none$tD, `copy$tD, `link$tD, `move$tD ◎ The possible values are "none", "copy", "link", and "move".
%dataTransfer.`effectAllowed$m [ = %value ]
許容されている操作oの種類を返す。 ◎ Returns the kinds of operations that are to be allowed.
( `dragstart$et ~eventの間に)設定して、 許容される操作oを変更できる。 ◎ Can be set (during the dragstart event), to change the allowed operations.
アリな値は ⇒ `none$tE, `copy$tE, `copyLink$tE, `copyMove$tE, `link$tE, `linkMove$tE, `move$tE, `all$tE, `uninitialized$tE, ◎ The possible values are "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized",
%dataTransfer.`items$m
~drag~dataが伴われている `DataTransferItemList$I ~objを返す。 ◎ Returns a DataTransferItemList object, with the drag data.
%dataTransfer.`setDragImage(image【!element】, x, y)$m
所与の要素 %image を~drag~feedbackを更新するために利用する — 以前に指定された~feedbackは置換される。 ◎ Uses the given element to update the drag feedback, replacing any previously specified feedback.
%dataTransfer.`types$m
`dragstart$et ~eventにて設定された形式を~listする`凍結d配列$を返す。 加えて,何らかの~fileが~dragされている場合、 ~list内の型のうちいずれかは文字列 `Files^l になる。 ◎ Returns a frozen array listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".
%data = %dataTransfer.`getData(format)$m
指定された形式の~dataを返す。 そのような形式の~dataがなければ空~文字列を返す。 ◎ Returns the specified data. If there is no such data, returns the empty string.
%dataTransfer.`setData(format, data)$m
指定された形式の~dataを追加する。 ◎ Adds the specified data.
%dataTransfer.`clearData([ format ])$m
指定された形式の~dataを除去する。 引数が省略された場合はすべての~dataを除去する。 ◎ Removes the data of the specified formats. Removes all data if the argument is omitted.
%dataTransfer.`files$m
~fileたちが~dragされているならば,それらが成す `FileList$I を返す。 ◎ Returns a FileList of the files being dragged, if any.

`~DnD~event@#dndevents$の一環で作成された `DataTransfer$I ~objが有効なのは,当の~eventが発火されている間に限られ、 その間に限り,`~drag~data~store$が結付けられる。 ◎ DataTransfer objects that are created as part of drag-and-drop events are only valid while those events are being fired. ◎ A DataTransfer object is associated with a drag data store while it is valid.

【 ~eventの配送-後は、 特殊~値 ε が結付けられる (そのように、この訳では形式化して述べる)。 】

各 `DataTransfer$I ~objには `型~list@ が結付けられる。 これは、 `FrozenArray<DOMString>^I 型であり,初期~時は空とする。 ◎ A DataTransfer object has an associated types array, which is a FrozenArray<DOMString>, initially empty.\

所与の `DataTransfer$I ~obj %O に対し,[ %O の`~item~list$ddSの内容が変化したとき/ %O の`~drag~data~store$が ε になったとき ]は、 次の手続きを走らす: ◎ When the contents of the DataTransfer object's drag data store item list change, or when the DataTransfer object becomes no longer associated with a drag data store, run the following steps:

  1. %L ~LET 空な連列 ( ~IDL `sequence<DOMString>^c 型) ◎ Let L be an empty sequence.
  2. ~IF[ %O の`~drag~data~store$ ~NEQ ε ]: ◎ If the DataTransfer object is still associated with a drag data store, then:

    1. %~item~list ~LET %O の`~drag~data~store$の`~item~list$ddS ◎ ↓
    2. %~item~list を成す ~EACH( %~item ) に対し ⇒ ~IF[ %~item の`種類$dI ~EQ `Text^i ] ⇒ %L に %~item の`型~文字列$dIを追加する ◎ For each item in the DataTransfer object's drag data store item list whose kind is text, add an entry to L consisting of the item's type string.
    3. ~IF[ %~item~list 内に[ `種類$dI ~EQ `File^i ]を満たす %~item は在る ] ⇒ %L に文字列 `Files^l を追加する (この値は、小文字でないので %L 内の他の値と判別できる) ◎ If there are any items in the DataTransfer object's drag data store item list whose kind is File, then add an entry to L consisting of the string "Files". (This value can be distinguished from the other values because it is not lowercase.)
  3. %O の`型~list$ ~SET `凍結d配列を作成する$( %L ) ◎ Set the DataTransfer object's types array to the result of creating a frozen array from L.

`DataTransfer$I ~obj %O の `~store~mode@ は、[ %O の`~drag~data~store$ ~NEQ ε ならば %O の`~mode$ddS / ~ELSE_ `不能化~mode@i ]を返す。

`形式~文字列を正規化する@ ときは、 ( 所与の文字列 %形式 ) に対し,次を走らす:

  1. %形式 ~SET `~ASCII小文字~化する$( %形式 )
  2. ~RET %形式 に応じて ⇒# `text^l ならば `text/plain^l / `url^l ならば `text/uri-list^l / ~ELSE_ %形式

【 `~store~mode$, `不能化~mode$i, `形式~文字列を正規化する$は、 共通な記述を整理集約するために,この訳に導入した定義である。 】

`new DataTransfer()@m 構築子~手続きは:

  1. %~store ~LET `~drag~data~storeを作成する$()
  2. %~store の`~mode$ddS ~SET `可書~mode$i
  3. コレに %~store を結付ける
  4. コレの ⇒# `dropEffect$m ~SET `none^l; `effectAllowed$m ~SET `none^l
◎ The DataTransfer() constructor, when invoked, must return a newly created DataTransfer object initialized as follows: ◎ Set the drag data store's item list to be an empty list. ◎ Set the drag data store's mode to read/write mode. ◎ Set the dropEffect and effectAllowed to "none".

`dropEffect@m 属性は、 ~DnD操作oの間に利用者に示される~feedbackを制御する: ◎ The dropEffect attribute controls the drag-and-drop feedback that the user is given during a drag-and-drop operation.\

  • この属性は、 コレの作成-時に,ある文字列~値(下の “設定子” に示されるいずれか)に設定される。 ◎ When the DataTransfer object is created, the dropEffect attribute is set to a string value.\
  • その取得子~手続きは、 最後に設定された値を返す。 ◎ On getting, it must return its current value.\
  • その設定子~手続きは:

    1. ~IF[ 所与の値 ~NIN { `none@tD, `copy@tD, `link@tD, `move@tD } ] ⇒ ~RET
    2. この属性の値 ~SET 所与の値
    ◎ On setting, if the new value is one of "none", "copy", "link", or "move", then the attribute's current value must be set to the new value. Other values must be ignored.

`effectAllowed@m 属性は、 ~DnD処理~modelにおいて[ `dragenter$et / `dragover$et ]~eventの間に,コレの `dropEffect$m 属性を初期化するときに利用される: 【!この属性は、許容される効果state$ddSを与える。】 ◎ The effectAllowed attribute is used in the drag-and-drop processing model to initialize the dropEffect attribute during the dragenter and dragover events.\

  • この属性は、 コレの作成-時に,ある文字列~値(下の “設定子” に示されるいずれか)に設定される。 ◎ When the DataTransfer object is created, the effectAllowed attribute is set to a string value.\
  • その取得子~手続きは、 最後に設定された値を返す。 ◎ On getting, it must return its current value.\
  • その設定子~手続きは:

    1. ~IF[ コレの`~store~mode$ ~NEQ `可書~mode$i ] ⇒ ~RET
    2. ~IF[ 所与の値 ~NIN { `none@tE, `copy@tE, `copyLink@tE, `copyMove@tE, `link@tE, `linkMove@tE, `move@tE, `all@tE, `uninitialized@tE } ] ⇒ ~RET
    3. この属性の値 ~SET 所与の値
    ◎ On setting, if drag data store's mode is the read/write mode and the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value. Otherwise, it must be left unchanged.
`items@m 取得子~手続きは ⇒ ~RET コレに結付けられた `DataTransferItemList$I ~obj ◎ The items attribute must return a DataTransferItemList object associated with the DataTransfer object.

`setDragImage(image, x, y)@m ~method~手続きは: ◎ The setDragImage(image, x, y) method must run the following steps:

  1. ~IF[ コレの`~store~mode$ ~NEQ `可書~mode$i ] ⇒ ~RET ◎ If the DataTransfer object is no longer associated with a drag data store, return. Nothing happens. ◎ If the drag data store's mode is not the read/write mode, return. Nothing happens.
  2. %~store ~LET コレの`~drag~data~store$ ◎ ↓
  3. %~store の`~bitmap$ddS ~SET %image に応じて ⇒# `img$e 要素であるならば %image の画像(その~sizeは画像の`生来な~size$による)/ ~ELSE_ %image から生成される画像(生成するための正確な仕組みは、まだ指定されていない) ◎ If image is an img element, then set the drag data store bitmap to the element's image (at its natural size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).
  4. %~store の`~hot-spot座標$ddS ~SET 座標 ( %x, %y ) ◎ Set the drag data store hot spot coordinate to the given x, y coordinate.
`types@m 取得子~手続きは ⇒ ~RET コレの`型~list$ ◎ The types attribute must return this DataTransfer object's types array.

`getData(format)@m ~method~手続きは: ◎ The getData(format) method must run the following steps:

  1. ~IF[ コレの`~store~mode$ ~IN { `不能化~mode$i, `保護d~mode$i } ] ⇒ ~RET 空~文字列 ◎ If the DataTransfer object is no longer associated with a drag data store, then return the empty string. ◎ If the drag data store's mode is the protected mode, then return the empty string.
  2. %正規化-済み ~LET `形式~文字列を正規化する$( %format ) ◎ ↓
  3. %~item ~LET コレの`~drag~data~store$の`~item~list$ddS内に次を満たす`~data~item$は[ 在るならば それ(一意に定まる) / 無いならば ε ] ⇒ [ `種類$dI ~EQ `Text^i【!原文更新漏れ Plain Unicode string 】 ]~AND[ `型~文字列$dI ~EQ %正規化-済み ] ◎ Let format be the first argument, converted to ASCII lowercase. ◎ Let convert-to-URL be false. ◎ If format equals "text", change it to "text/plain". ◎ If format equals "url", change it to "text/uri-list" and set convert-to-URL to true. ◎ If there is no item in the drag data store item list whose kind is text and whose type string is equal to format, return the empty string. ◎ Let result be the data of the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format.
  4. ~IF[ %~item ~EQ ε ] ⇒ ~RET 空~文字列 ◎ ↑
  5. %結果 ~LET %~item の`実際の~data$dI ◎ ↑
  6. ~IF[ `~ASCII小文字~化する$( %format ) ~EQ `url^l ] ⇒ ~RET [[ %結果 を `RFC2483$r に則って, `text/uri-list^l に対し適切に構文解析した結果の~list ]が空でなければ その中の最初の~URL / ~ELSE_ 空~文字列 ]

    【 %format に `text/uri-list^l が渡された場合と ( %正規化-済み は同じになるが) 挙動が異なる。 】

    ◎ If convert-to-URL is true, then parse result as appropriate for text/uri-list data, and then set result to the first URL from the list, if any, or the empty string otherwise. [RFC2483]
  7. ~RET %結果 ◎ Return result.

`setData(format, data)@m ~method~手続きは: ◎ The setData(format, data) method must run the following steps:

  1. ~IF[ コレの`~store~mode$ ~NEQ `可書~mode$i ] ⇒ ~RET ◎ If the DataTransfer object is no longer associated with a drag data store, return. Nothing happens. ◎ If the drag data store's mode is not the read/write mode, return. Nothing happens.
  2. %形式 ~LET `形式~文字列を正規化する$( %format ) ◎ Let format be the first argument, converted to ASCII lowercase. ◎ If format equals "text", change it to "text/plain". ◎ If format equals "url", change it to "text/uri-list".
  3. %~item~list ~LET コレの`~drag~data~store$の`~item~list$ddS ◎ ↓
  4. %~item~list から次を満たす`~data~item$を除去する ⇒ [ `種類$dI ~EQ `Text^i ]~AND[ `型~文字列$dI ~EQ %形式 ] ◎ Remove the item in the drag data store item list whose kind is text and whose type string is equal to format, if there is one.
  5. %~item~list に次を追加する ⇒ 新たな`~data~item$ — その ⇒# `種類$dI ~SET `Text^i; `型~文字列$dI ~SET %形式; `実際の~data$dI ~SET %data ◎ Add an item to the drag data store item list whose kind is text, whose type string is equal to format, and whose data is the string given by the method's second argument.

【 除去した上で,追加するので、 %~item~list 内での当の`~data~item$の~indexも変化することになる(本当か?)。 】

`clearData(format)@m ~method~手続きは: ◎ The clearData(format) method must run the following steps:

  1. ~IF[ コレの`~store~mode$ ~NEQ `可書~mode$i ] ⇒ ~RET ◎ If the DataTransfer object is no longer associated with a drag data store, return. Nothing happens. ◎ If the drag data store's mode is not the read/write mode, return. Nothing happens.
  2. ~IF[ %format ~EQ ε ] ⇒ コレの`~drag~data~store$の`~item~list$ddSから次を満たす`~data~item$をすべて除去する ⇒ `種類$dI ~EQ `Text^i【!原文更新漏れ Plain Unicode string → text 】 ◎ If the method was called with no arguments, remove each item in the drag data store item list whose kind is Plain Unicode string, and return.
  3. ~ELSE ⇒ コレの`~drag~data~store$の`~item~list$ddSから次を満たす`~data~item$をすべて除去する ⇒ [ `種類$dI ~EQ `Text^i ]~AND[ `型~文字列$dI ~EQ `形式~文字列を正規化する$( %format ) ] ◎ Set format to format, converted to ASCII lowercase. ◎ If format equals "text", change it to "text/plain". ◎ If format equals "url", change it to "text/uri-list". ◎ Remove the item in the drag data store item list whose kind is text and whose type string is equal to format, if there is one.

注記: ~drag内に~fileが含まれている場合、 この~methodを~callしても それらの~fileには影響しないので, `types$m 属性が返す~listは依然として 文字列 `Files^l を包含することになる。 ◎ The clearData() method does not affect whether any files were included in the drag, so the types attribute's list might still not be empty after calling clearData() (it would still contain the "Files" string if any files were included in the drag).

`files@m 取得子~手続きは: ◎ The files attribute must\ ↓↓return a live FileList sequence consisting of File objects representing the files found by the following steps. Furthermore, for a given FileList object and a given underlying file, the same File object must be used each time.

  1. %L ~LET 空~list ◎ Start with an empty list L.
  2. ~IF[ コレの`~store~mode$ ~NIN { `不能化~mode$i, `保護d~mode$i } ] ⇒ コレの`~drag~data~store$の`~item~list$ddSを成す ~EACH( `~data~item$ %~item ) に対し ⇒ ~IF[ %~item の`種類$dI ~EQ `File^i ] ⇒ %~item の`実際の~data$dI ( ~file, 特にその名前と内容, および その`型~文字列$dI) を表現する `File$I ~objを %L に追加する ◎ If the DataTransfer object is no longer associated with a drag data store, the FileList is empty. Return the empty list L. ◎ If the drag data store's mode is the protected mode, return the empty list L. ◎ For each item in the drag data store item list whose kind is File, add the item's data (the file, in particular its name and contents, as well as its type) to the list L.
  3. ~RET %L を表現する,`~live$な `FileList$I ~obj ◎ The files found by these steps are those in the list L. ◎ ↑↑

結果の `FileList$I ~objにおいては、 同じ下層の~fileに対し,毎回~同じ `File$I ~objを利用するモノトスル。 ◎ ↑↑

注記: この~versionの~APIは、 ~drag中は,~fileの型を公開しない。 ◎ This version of the API does not expose the types of the files during the drag.

6.11.3.1. `DataTransferItemList^I ~interface

各 `DataTransfer$I ~objには、 `DataTransferItemList$I ~objが結付けられる。 ◎ Each DataTransfer object is associated with a DataTransferItemList object.

[Exposed=Window]
interface `DataTransferItemList@I {
  readonly attribute unsigned long `length$m;
  `getter$m `DataTransferItem$I (unsigned long %index);
  `DataTransferItem$I? `add$m(DOMString %data, DOMString %type);
  `DataTransferItem$I? `add$m(`File$I %data);
  undefined `remove$m(unsigned long %index);
  undefined `clear$m();
};
%items.`length$m
`~drag~data~store$内の`~data~item$数を返す。 ◎ Returns the number of items in the drag data store.
%items[%index]
`~drag~data~store$内の %index 番の~entryを表現している `DataTransferItem$I ~objを返す。 ◎ Returns the DataTransferItem object representing the indexth entry in the drag data store.
%items.`remove(index)$m
`~drag~data~store$内の %~index 番の~entryを除去する。 ◎ Removes the indexth entry in the drag data store.
%items.`clear()$m
`~drag~data~store$内のすべての~entryを除去する。 ◎ Removes all the entries in the drag data store.
%items.`add(data)$m
%items.`add(data, type)$m
所与の %data 用の新たな~entryを,`~drag~data~store$に追加する。 %data が素な~textの場合は, %type 文字列も供される必要がある。 ◎ Adds a new entry for the given data to the drag data store. If the data is plain text then a type string has to be provided also.

`DataTransferItemList$I ~obj %L の `~store~mode@1 は、 %L を結付けている `DataTransfer$I ~objの`~store~mode$を参照する。 ◎ While the DataTransferItemList object's DataTransfer object is associated with a drag data store, the DataTransferItemList object's mode is the same as the drag data store mode. When the DataTransferItemList object's DataTransfer object is not associated with a drag data store, the DataTransferItemList object's mode is the disabled mode. The drag data store referenced in this section (which is used only when the DataTransferItemList object is not in the disabled mode) is the drag data store with which the DataTransferItemList object's DataTransfer object is associated.

`length@m 取得子~手続きは:

  1. ~IF[ コレの`~store~mode$1 ~EQ `不能化~mode$i ] ⇒ ~RET 0
  2. ~RET コレが表現する`~item~list$ddSの`~size$
◎ The length attribute must return zero if the object is in the disabled mode; otherwise it must return the number of items in the drag data store item list.

`getter@m の挙動は、 次に従う:

  • コレが`~supportする~prop~index$は、 コレの`~item~list$ddSの`~index群$とする。

    【 コレの`~store~mode$1 ~EQ `不能化~mode$i のときは、 空~集合になるべきであろう。 】

    ◎ When a DataTransferItemList object is not in the disabled mode, its supported property indices are the indices of the drag data store item list.
  • コレ用の`有index~propの値を決定する手続き$は、 所与の ( コレが`~supportする~prop~index$ %~index ) に対し, 次の拘束に従う `DataTransferItem$I ~obj %~item を返すモノトスル: ◎ To determine the value of an indexed property i of a DataTransferItemList object, the user agent must return a DataTransferItem object\

    • %~item は、 `~item~list$ddS内の %~index 番の`~data~item$を表現する。 ◎ representing the ith item in the drag data store.\
    • 同じ`~data~item$に対しては,毎回 %~item として同じ~objを返す。 ◎ The same object must be returned each time a particular item is obtained from this DataTransferItemList object.\
    • %~item に結付けられた `DataTransfer$I ~obj ~EQ コレを結付けているそれ。 ◎ The DataTransferItem object must be associated with the same DataTransfer object as the DataTransferItemList object when it is first created.

[ `add(data, type)@m / `add(data)$m ]~method~手続きは: ◎ The add() method must run the following steps:

  1. ~IF[ コレの`~store~mode$1 ~NEQ `可書~mode$i ] ⇒ ~RET ~NULL ◎ If the DataTransferItemList object is not in the read/write mode, return null.
  2. %~item~list ~LET コレが表現する`~item~list$ddS ◎ ↓
  3. %新~item ~LET ε ◎ ↓
  4. %data の型に応じて: ◎ Jump to the appropriate set of steps from the following list:

    文字列 ◎ If the first argument to the method is a string
    1. %type ~SET `~ASCII小文字~化する$( %type ) ◎ ↓
    2. ~IF[ %~item~list 内に[[ `種類$dI ~EQ `Text^i ]~AND[ `型~文字列$dI ~EQ %type ]]を満たす`~data~item$が在る ] ⇒ ~THROW `NotSupportedError$E ◎ If there is already an item in the drag data store item list whose kind is text and whose type string is equal to the value of the method's second argument, converted to ASCII lowercase, then throw a "NotSupportedError" DOMException.
    3. %新~item ~SET 新たな`~data~item$ — その ⇒# `種類$dI ~SET `Text^i, `型~文字列$dI ~SET %type, `実際の~data$dI ~SET %data ◎ Otherwise, add an item to the drag data store item list whose kind is text, whose type string is equal to the value of the method's second argument, converted to ASCII lowercase, and whose data is the string given by the method's first argument.
    `File$I ◎ If the first argument to the method is a File
    %新~item ~SET 新たな`~data~item$ — その ⇒# `種類$dI ~SET `File^i, `型~文字列$dI ~SET `~ASCII小文字~化する$( %data の `type@~FILEAPI#dfn-type$m ), `実際の~data$dI ~SET %data の~data【`~byte列~data@~FILEAPI#_ref-bytes$】 ◎ Add an item to the drag data store item list whose kind is File, whose type string is the type of the File, converted to ASCII lowercase, and whose data is the same as the File's data.
  5. %新~item を %~item~list に追加する ◎ ↑
  6. ~RET %新~item を表現する,新たな `DataTransferItem$I ~obj — `有index~propの値を決定する@#dom-datatransferitemlist-item$ときは、 この~objが利用されることになる。 ◎ Determine the value of the indexed property corresponding to the newly added item, and return that value (a newly created DataTransferItem object).

`remove(index)@m ~method~手続きは: ◎ The remove(index) method must run these steps:

  1. ~IF[ コレの`~store~mode$1 ~NEQ `可書~mode$i ] ⇒ ~THROW `InvalidStateError$E ◎ If the DataTransferItemList object is not in the read/write mode, throw an "InvalidStateError" DOMException.
  2. コレが表現する`~item~list$ddSから %index 番の`~data~item$を(もしあれば)除去する ◎ If the drag data store does not contain an indexth item, then return. ◎ Remove the indexth item from the drag data store.

`clear()@m ~method~手続きは:

  1. ~IF[ コレの`~store~mode$1 ~NEQ `可書~mode$i ] ⇒ ~RET
  2. コレが表現する`~item~list$ddSからすべての`~data~item$を除去する
◎ The clear() method, if the DataTransferItemList object is in the read/write mode, must remove all the items from the drag data store. Otherwise, it must do nothing.
6.11.3.2. `DataTransferItem^I ~interface

各 `DataTransferItem$I ~objには `DataTransfer$I ~objが結付けられる。 ◎ Each DataTransferItem object is associated with a DataTransfer object.

[Exposed=Window]
interface `DataTransferItem@I {
  readonly attribute DOMString `kind$m;
  readonly attribute DOMString `type$m;
  undefined `getAsString$m(`FunctionStringCallback$I? %_callback);
  `File$I? `getAsFile$m();
};

callback `FunctionStringCallback@I = undefined (DOMString %data);
%item.`kind$m
`~data~item$の`種類$dIを 次に挙げるいずれかとして返す ⇒ `string^l, `file^l ◎ Returns the drag data item kind, one of: "string", "file".
%item.`type$m
`~data~item$の`型~文字列$dIを返す。 ◎ Returns the drag data item type string.
%item.`getAsString(callback)$m
`~data~item$の`種類$dI ~EQ `Text^i ならば、 文字列~dataを引数に %callback を呼出す。 ◎ Invokes the callback with the string data as the argument, if the drag data item kind is text.
%file = %item.`getAsFile()$m
`~data~item$の`種類$dI ~EQ `File^i であれば `File$I ~objを返す。 ◎ Returns a File object, if the drag data item kind is File.

`DataTransferItem$I ~obj %~item の `~item~mode@ は、 次を走らせた結果を返す:

  1. %L ~LET %~item に結付けられた `DataTransfer$I ~objに結付けられた `DataTransferItemList$I ~obj
  2. ~IF[ %L の`~store~mode$1 ~EQ `不能化~mode$i ]~OR[ %~item が表現する`~data~item$は %L が表現する`~item~list$ddSから除去されている ] ⇒ ~RET `不能化~mode$i
  3. ~RET %L の`~store~mode$1
◎ While the DataTransferItem object's DataTransfer object is associated with a drag data store and that drag data store's drag data store item list still contains the item that the DataTransferItem object represents, the DataTransferItem object's mode is the same as the drag data store mode. When the DataTransferItem object's DataTransfer object is not associated with a drag data store, or if the item that the DataTransferItem object represents has been removed from the relevant drag data store item list, the DataTransferItem object's mode is the disabled mode. The drag data store referenced in this section (which is used only when the DataTransferItem object is not in the disabled mode) is the drag data store with which the DataTransferItem object's DataTransfer object is associated.
`kind@m 取得子~手続きは ⇒ ~RET コレの`~item~mode$に応じて ⇒ `不能化~mode$i ならば 空~文字列 / ~ELSE_ コレが表現する`~data~item$の`種類$dIに応じて ⇒ `Text^i ならば `string^l / `File^i ならば `file^l ◎ The kind attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise it must return the string given in the cell from the second column of the following table from the row whose cell in the first column contains the drag data item kind of the item represented by the DataTransferItem object: Kind String Text "string" File "file"
`type@m 取得子~手続きは ⇒ ~RET コレの`~item~mode$に応じて ⇒# `不能化~mode$i ならば 空~文字列 / ~ELSE_ コレが表現する`~data~item$の`型~文字列$dI ◎ The type attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise it must return the drag data item type string of the item represented by the DataTransferItem object.

`getAsString(callback)@m ~method~手続きは: ◎ The getAsString(callback) method must run the following steps:

  1. ~IF[ %callback ~EQ ~NULL ] ⇒ ~RET ◎ If the callback is null, return.
  2. ~IF[ コレの`~item~mode$ ~NIN { `可書~mode$i, `読専~mode$i } ] ⇒ ~RET ◎ If the DataTransferItem object is not in the read/write mode or the read-only mode, return. The callback is never invoked.
  3. ~IF[ コレが表現する`~data~item$の`種類$dI ~NEQ `Text^i ] ⇒ ~RET — %callback が呼出されることは決して無い ◎ If the drag data item kind is not text, then return. The callback is never invoked.
  4. `~taskを~queueする$( 【`利用者~対話~task~source$?】, 次の手続き )

    手続きは ⇒ コレが表現する`~data~item$の`実際の~data$dIを引数に渡して %callback を呼出す 【`~callback関数を呼出す$( %callback, « …の`実際の~data$dI », `報告する^i, コレ ) ?】
    ◎ Otherwise, queue a task to invoke callback, passing the actual data of the item represented by the DataTransferItem object as the argument.

`getAsFile()@m ~method~手続きは: ◎ The getAsFile() method must run the following steps:

  1. ~IF[ コレの`~item~mode$ ~NIN { `可書~mode$i, `読専~mode$i } ] ⇒ ~RET ~NULL ◎ If the DataTransferItem object is not in the read/write mode or the read-only mode, then return null.
  2. ~IF[ コレが表現する`~data~item$の`種類$dI ~NEQ `File^i ] ⇒ ~RET ~NULL ◎ If the drag data item kind is not File, then return null.
  3. ~RET コレが表現する`~data~item$の`実際の~data$dIを表現している,新たな `File$I ~obj 【毎回~新たな~objを返すことになる。】 ◎ Return a new File object representing the actual data of the item represented by the DataTransferItem object.

6.11.4. `DragEvent^I ~interface

~DnD処理~modelには、 いくつかの~eventが孕まれる。 それらはいずれも `DragEvent$I ~interfaceを利用する。 ◎ The drag-and-drop processing model involves several events. They all use the DragEvent interface.

[Exposed=Window]
interface `DragEvent@I : `MouseEvent$I {
  constructor(DOMString %type, optional `DragEventInit$I %eventInitDict = {});

  readonly attribute `DataTransfer$I? `dataTransfer$m;
};

dictionary `DragEventInit@I : `MouseEventInit$I {
  `DataTransfer$I? dataTransfer = null;
};
%event.`dataTransfer$m
~event用の `DataTransfer$I ~objを返す。 ◎ Returns the DataTransfer object for the event.

注記: 他の~event~interfaceと一貫させるため, `DragEvent$I ~interfaceには構築子があるが、 それはまったく有用でない。 特に、 ~scriptが有用な `DataTransfer$I ~objを作成する仕方はない — `DataTransfer$I ~objの処理~modelと~security~modelは、 ~DnDの間に,~browserにより協調されるので。 ◎ Although, for consistency with other event interfaces, the DragEvent interface has a constructor, it is not particularly useful. In particular, there's no way to create a useful DataTransfer object from script, as DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops.

`dataTransfer@m 取得子~手続きは、 初期化-時の値を返す。 それは、 当の~event用の文脈~情報を表現する。 ◎ The dataTransfer attribute of the DragEvent interface must return the value it was initialized to. It represents the context information for the event.

`~DnD~eventを発火する@ ときは、 所与の ( %要素, %~event型, %関係する~target (省略時は ~NULL ) ) に対し,次の手続きを走らすモノトスル: ◎ When a user agent is required to fire a DND event named e at an element, using a particular drag data store, and optionally with a specific related target, the user agent must run the following steps:

【 ~DnD操作oに関わるすべての~eventは、 この手続きを通して発火される。 】【 以下における `~store$V は、 `§ ~DnD処理~model@#drag-and-drop-processing-model$ にて作成される`~drag~data~store$を指す (同じ~DnD操作oから生じる各~event間で共有される)。 】

  1. %~storeは変化したか ~LET ~F ◎ Let dataDragStoreWasChanged be false.
  2. %~window ~LET %要素 の`~node文書$【! `Document$I ~obj】に`関連な大域~obj$ ◎ ↑If no specific related target was provided, set related target to null. ◎ Let window be the relevant global object of the Document object of the specified target element.
  3. ~IF[ %~event型 ~EQ `dragstart$et ] ⇒ %~storeは変化したか ~SET ~T ◎ ↓
  4. `~store$V の`~mode$ddS ~SET %~event型 に応じて ⇒# `dragstart$et ならば `可書~mode$i / `drop$et ならば `読専~mode$i / ~ELSE_ `保護d~mode$i(`作成-時@#create-a-drag-data-store$のまま) ◎ If e is dragstart, then set the drag data store mode to the read/write mode and set dataDragStoreWasChanged to true. ◎ If e is drop, set the drag data store mode to the read-only mode.
  5. %dataTransfer ~LET 新たな `DataTransfer$I ~obj

    【 同じ `DataTransfer$I ~objが複数の~event間で共有されることはなく、 毎回~新たに作成されることになる。 】

    ◎ ↓
  6. %dataTransfer の`~drag~data~store$ ~SET `~store$V ◎ Let dataTransfer be a newly created DataTransfer object associated with the given drag data store.
  7. %dataTransfer の `effectAllowed$m 属性 ~SET `~store$V に`許容される効果state$ddS ◎ Set the effectAllowed attribute to the drag data store's drag data store allowed effects state.
  8. %dataTransfer の `dropEffect$m 属性 ~SET %~event型 に応じて:

    `dragstart$et
    `drag$et
    `dragleave$et
    `none$tD
    `drop$et
    `dragend$et
    `現在の~drag操作o$
    `dragenter$et
    `dragover$et
    下の表tの[ 1 列目に示される `effectAllowed$m 属性の値 ]に応じて、 同じ行の 2 列目に示される値, または場合によっては[ 3 列目の`代替-選択肢$に与えられるいずれかの値 ](下を見よ)
    ◎ Set the dropEffect attribute to "none" if e is dragstart, drag, or dragleave; to the value corresponding to the current drag operation if e is drop or dragend; and to a value based on the effectAllowed attribute's value and the drag-and-drop source, as given by the following table, otherwise (i.e. if e is dragenter or dragover):
    `effectAllowed$m `dropEffect$m `代替-選択肢$
    `none$tE `none$tD
    `copy$tE `copy$tD
    `copyLink$tE `copy$tD `link$tD
    `copyMove$tE `copy$tD `move$tD
    `all$tE `copy$tD `link$tD, `move$tD
    `link$tE `link$tD
    `linkMove$tE `link$tD `move$tD
    `move$tE `move$tD
    `uninitialized$tE (1) `move$tD `copy$tD, `link$tD
    `uninitialized$tE (2) `copy$tD `link$tD, `move$tD
    `uninitialized$tE (3) `link$tD `copy$tD, `move$tD
    他の場合 `copy$tD `link$tD, `move$tD

    `uninitialized$tE に対する (1), (2), (3) は、 順に,~DnD~sourceが次に該当する場合に限られる:

    • (1) ~text~controlからの選択
    • (2) 他からの選択
    • (3) `href$a 属性を有する `a$e 要素
    ◎ effectAllowed|dropEffect "none"|"none" "copy"|"copy" "copyLink"|"copy", or, if appropriate, "link" "copyMove"|"copy", or, if appropriate, "move" "all"|"copy", or, if appropriate, either "link" or "move" "link"|"link" "linkMove"|"link", or, if appropriate, "move" "move"|"move" "uninitialized" when what is being dragged is a selection from a text control|"move", or, if appropriate, either "copy" or "link" "uninitialized" when what is being dragged is a selection|"copy", or, if appropriate, either "link" or "move" "uninitialized" when what is being dragged is an a element with an href attribute|"link", or, if appropriate, either "copy" or "move" Any other case|"copy", or, if appropriate, either "link" or "move"

    上の表tにて `代替-選択肢@ が供されている所では、 ~platform規約から[ 利用者が,挙げられたいずれかの代替による効果を要請した ]ことが規定されるならば, ~UAは その代替~値を代わりに利用してもヨイ。 ◎ Where the table above provides possibly appropriate alternatives, user agents may instead use the listed alternative values if platform conventions dictate that the user has requested those alternate effects.

    例えば, Windows ~platform規約では、 `Alt^kY ~UIkeyを押しながら~dragしたときは,[ 移動-や複製-でなく,~dataへ~linkする ]ことが選好されている。 したがって Windows ~system上では、 `代替-選択肢$に `link$tD がある所では,~UAは[ `Alt^kY ~UIkeyが押下げられている間は、 `copy$tD や `move$tD の代わりにそれを選択する ]こともできる。 ◎ For example, Windows platform conventions are such that dragging while holding the "alt" key indicates a preference for linking the data, rather than moving or copying it. Therefore, on a Windows system, if "link" is an option according to the table above while the "alt" key is depressed, the user agent could select that instead of "copy" or "move".

  9. %~event ~LET `~eventを作成する$( `DragEvent$I ): ◎ Let event be the result of creating an event using DragEvent.
  10. %~event の各種~属性を次に従って初期化する:

    1. 次に挙げる属性を初期化する ⇒# `~type0$m ~SET %~event型, `bubbles$m ~SET ~T, `view$m ~SET %~window, `relatedTarget$m ~SET %関係する~target, `dataTransfer$m ~SET %dataTransfer
    2. ~IF[ %~event型 ~NIN { `dragleave$et, `dragend$et } ] ⇒ `cancelable$m ~SET ~T
    3. 各種[ ~mouse/~UIkey ]属性を — 利用者~対話~event `UIEVENTS$r に対するときと同様に — 入力~装置の状態に則って初期化する
    4. 関連な~pointing装置が無い場合、 次に挙げる属性も初期化する ⇒# `screenX^m ~SET 0, `screenY^m ~SET 0, `clientX^m ~SET 0, `clientY^m ~SET 0, `button^m ~SET 0
    ◎ Initialize event's type attribute to e, its bubbles attribute to true, its view attribute to window, its relatedTarget attribute to related target, and its dataTransfer attribute to dataTransfer. ◎ If e is not dragleave or dragend, then initialize event's cancelable attribute to true. ◎ Initialize event's mouse and key attributes initialized according to the state of the input devices as they would be for user interaction events. ◎ If there is no relevant pointing device, then initialize event's screenX, screenY, clientX, clientY, and button attributes to 0.
  11. `~eventを配送する$( %要素, %~event ) ◎ Dispatch event at the specified target element.
  12. `~store$V に`許容される効果state$ddS ~SET %dataTransfer の`effectAllowed$m 属性の現在の値 (この属性の値が変更されるのは、 %~event型 ~EQ `dragstart$et のときに限られる) ◎ Set the drag data store allowed effects state to the current value of dataTransfer's effectAllowed attribute. (It can only have changed value if e is dragstart.)
  13. ~IF[ %~storeは変化したか ~EQ ~T ] ⇒ `~store$V の`~mode$ddS ~SET `保護d~mode$i ◎ If dataDragStoreWasChanged is true, then set the drag data store mode back to the protected mode.
  14. %dataTransfer の`~drag~data~store$ ~SET ε ◎ Break the association between dataTransfer and the drag data store.
  15. ~RET %~event †

【† 配送された~eventは,この手続きを呼出している箇所からも参照されているので、 この訳では %~event を返す段を追加している。 それらの箇所における “%~event は `取消され@ た” という記述は、 おそらく[ %~event の`取消されたか$ev ~EQ ~T (上で~eventを配送した結果 ~EQ ~F ) ]になったことを意味する。 】

6.11.5. 処理~model

利用者が~drag操作oを始めるよう試みたときは、 ~UAは,次の手続きを走らすモノトスル。 ~UAは、 当の~dragが[ 実際には[ 別の文書/【~OSに~nativeな】~app ]内から開始されていて、[ 自身から見える~~範囲の下で,文書に交差するまで ]は自覚できなかった場合 ]でも,この手続きが走っていたかのように動作するモノトスル: ◎ When the user attempts to begin a drag operation, the user agent must run the following steps. User agents must act as if these steps were run even if the drag actually started in another document or application and the user agent was not aware that the drag was occurring until it intersected with a document under the user agent's purview.

  1. %~drag対象 ~LET ~drag操作oがどこで呼出されたかに応じて: ◎ Determine what is being dragged, as follows:

    • ある選択~上 ⇒ その選択 【 `Selection API^cite `SELECTION$r にて定義される`選択@~SELECTIONAPI#dfn-selection$であろう。】 ◎ If the drag operation was invoked on a selection, then it is the selection that is being dragged.
    • ある`文書$上 ⇒ 利用者が~dragし始めようとした~node ◎ Otherwise, if the drag operation was invoked on a Document,\ ↓↓ it is the first element, going up the ancestor chain, starting at the node that the user tried to drag, that has the IDL attribute draggable set to true. If there is no such element, then nothing is being dragged; return, the drag-and-drop operation is never started.
    • その他 (~UAの外側) ⇒ ~dragが開始された所の~app(または,その中の文書~等)により定義されるもの — 以下では、 `外部のもの@ と称される。 ◎ Otherwise, the drag operation was invoked outside the user agent's purview. What is being dragged is defined by the document or application where the drag was started.
  2. ~IF[ %~drag対象 は~nodeである ]:

    1. ~IF[ %~drag対象 は`要素$でない ] ⇒ %~drag対象 ~SET %~drag対象 の`親~要素$
    2. ~WHILE[ %~drag対象 ~NEQ ~NULL ]

      1. ~IF[ %~drag対象 上の `draggable$m 取得子~手続き() ~EQ ~T ] ⇒ ~BREAK
      2. %~drag対象 ~SET %~drag対象 の`親~要素$
    3. ~IF[ %~drag対象 ~EQ ~NULL ] ⇒ ~RET (何も~dragされていないので、 ~DnD操作oは開始されない。)
    ◎ ↑

    注記: [ `img$e 要素 / `href$a 属性を有する `a$e 要素 ]の `draggable$m 属性 は、 既定では ~T を返す【!set to】。 ◎ img elements and a elements with an href attribute have their draggable attribute set to true by default.

  3. `~store@V ~LET `~drag~data~storeを作成する$()

    この節の手続きにて発火される すべての~DnD~eventは、 この `~store$V を利用するモノトスル。

    ◎ Create a drag data store. All the DND events fired subsequently by the steps in this section must use this drag data store.
  4. `~source~node@V ~SET %~drag対象 に応じて: ◎ Establish which DOM node is the source node, as follows:

    選択 ◎ If it is a selection that is being dragged,\
    利用者が~dragを開始した `Text$I ~node ◎ then the source node is the Text node that the user started the drag on\
    これは概して,利用者が最初に~clickした `Text$I ~nodeになるが、 利用者が特定0の~nodeを指定しなかった場合には (例:利用者は、 単に “現在の選択” を~dragし始めるよう~UAに伝えた場合)、 “現在の選択” のある部分を包含している `Text$I ~nodeのうち,最初のものになる。 ◎ (typically the Text node that the user originally clicked). If the user did not specify a particular node, for example if the user just told the user agent to begin a drag of "the selection", then the source node is the first Text node containing a part of the selection.
    `要素$ ◎ Otherwise, if it is an element that is being dragged,\
    %~drag対象 ◎ then the source node is the element that is being dragged.
    `外部のもの$ ◎ Otherwise,\
    なし( %~drag対象 は別の~appの一部である ) ◎ the source node is part of another document or application.\
    この仕様が `~source~node$V に向けて~eventを発火するよう要求する所では、 ~UAは,代わりに[ その状況に関連な,~platformに特有な規約 ]に従うモノトスル。 ◎ When this specification requires that an event be dispatched at the source node in this case, the user agent must instead follow the platform-specific conventions relevant to that situation.

    注記: ~DnD操作oの最中には、 `~source~node$V に向けて複数の~eventが発火される。 ◎ Multiple events are fired on the source node during the course of the drag-and-drop operation.

  5. %被~drag~node~list ~LET %~drag対象 に応じて: ◎ Determine the list of dragged nodes, as follows:

    • 選択 ⇒ 次を満たす~nodeすべてからなる,`~tree順序$による~list ⇒ 当の選択~内に[ 部分的/完全 ]に含まれている† ◎ If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors).

      【† 当の選択を表現する`範囲~obj$に[ `部分的@~DOM4#partially-contained$/ `全部的@~DOM4#contained$ ]に包含されている。 】

    • `要素$ ⇒ `~source~node$V のみを包含する~list ◎ Otherwise, the list of dragged nodes contains only the source node, if any.
    • `外部のもの$ ⇒ 空な~list ◎ ↑
  6. ~IF[ %~drag対象 は選択である ] ⇒ `~store$V の`~item~list$ddSに次を追加する ⇒ 新たな`~data~item$ — その ⇒# `型~文字列$dI ~SET `text/plain$l, `種類$dI ~SET `Text^i, `実際の~data$dI ~SET 選択の~text ◎ If it is a selection that is being dragged, then add an item to the drag data store item list, with its properties set as follows: • The drag data item type string •• "text/plain" • The drag data item kind •• Text • The actual data •• The text of the selection

  7. ~ELIF[ %~drag対象 は~fileたち(`外部のもの$)である ]: ◎ Otherwise, if any files are being dragged, then\

    1. ~fileたちを成す ~EACH( %~file ) に対し:

      1. %~MIME型 ~LET `application/octet-stream$l
      2. ~IF[ %~file の~MIME型は既知である ] ⇒ %~MIME型 ~SET %~file の~MIME型
      3. `~store$V の`~item~list$ddSに次を追加する ⇒ 新たな`~data~item$ — その ⇒# `型~文字列$dI ~SET %~MIME型, `種類$dI ~SET `File^i, `実際の~data$dI ~SET %~file の内容と名前,
      ◎ add one item per file to the drag data store item list, with their properties set as follows: • The drag data item type string •• The MIME type of the file, if known, or "application/octet-stream" otherwise. • The drag data item kind •• File • The actual data •• The file's contents and name.

    注記: ~fileを~dragし得るのは、 現時点では,`~navigable$の外側から — 例えば、~file~system管理用-~appから — に限られる。 ◎ Dragging files can currently only happen from outside a navigable, for example from a file system manager application.

    %~drag対象 が`外部のもの$である場合、 次が~UAに要求される:

    • ~platform規約を適切に尊守する下で、 ~dragされている~dataに適切な`~data~item$を `~store$V の`~item~list$ddSに追加する。
    • ~platform規約が[ ~dragされた~dataの型として`~MIME型$を利用していない ]場合、 その型から~MIME型へ対応付けるよう極力努める。
    • いずれにせよ、 `~data~item$の`型~文字列$dIは,`~ASCII小文字~化$するモノトスル。
    ◎ If the drag initiated outside of the application, the user agent must add items to the drag data store item list as appropriate for the data being dragged, honoring platform conventions where appropriate; however, if the platform conventions do not use MIME types to label dragged data, the user agent must make a best-effort attempt to map the types to MIME types, and, in any case, all the drag data item type strings must be converted to ASCII lowercase.

    ~UAは、[ 選択/~dragされた要素(たち) ]を表現するような,他の形(例:~HTML)による`~data~item$たちを追加してもヨイ。 ◎ User agents may also add one or more items representing the selection or dragged element(s) in other forms, e.g. as HTML.

  8. ~IF[ %被~drag~node~list は空でない ]: ◎ If the list of dragged nodes is not empty, then\

    1. %~JSON文字列 ~LET ~list内の~nodeから `~microdataを抽出して~JSON形に@~HTMLLS/microdata.html#extracting-json$した結果 ◎ extract the microdata from those nodes into a JSON form,\
    2. `~store$V の`~item~list$ddSに次を追加する ⇒ 新たな`~data~item$ — その ⇒# `型~文字列$dI ~SET `application/microdata+json$l, `種類$dI ~SET `Text^i, `実際の~data$dI ~SET %~JSON文字列 ◎ and add one item to the drag data store item list, with its properties set as follows: • The drag data item type string •• application/microdata+json • The drag data item kind •• Text • The actual data •• The resulting JSON string.

  9. %~URL群 ~LET « » ◎ Run the following substeps: • Let urls be « ».
  10. %被~drag~node~list を成す ~EACH( %~node ) に対し:

    1. %~URL ~LET ε
    2. ~IF[ %~node は `a$e 要素である ]~AND[ %~node は `href$a 内容~属性を有する ] ⇒ %~URL ~SET 当の属性の値
    3. ~ELIF[ %~node は `img$e 要素である ]~AND[ %~node は `src$a 内容~属性を有する ] ⇒ %~URL ~SET 当の属性の値
    4. ~ELSE ⇒ ~CONTINUE
    5. %~URL ~SET `~URLを符号化法の下で相対的に構文解析する$( %~URL, %~node の`~node文書$ ) 【!#encoding-parsing-and-serializing-a-url】
    6. ~IF[ %~URL ~EQ `失敗^i ] ⇒ ~CONTINUE

      【 この段は、この訳による補完(原文は、この場合にどうするか述べていない)。 】

    7. %~URL群 に次の結果を付加する ⇒ `~URLを直列化する$( %~URL )
    ◎ • For each node in the list of dragged nodes: •• If the node is an a element with an href attribute ••• Add to urls the result of encoding-parsing-and-serializing a URL given the element's href content attribute's value, relative to the element's node document. •• If the node is an img element with a src attribute ••• Add to urls the result of encoding-parsing-and-serializing a URL given the element's src content attribute's value, relative to the element's node document.
  11. ~IF[ %~URL群 は空でない ]: ◎ • If urls is still empty, then return.

    1. %~URL文字列 ~LET %~URL群 を[ U+000D CARRIAGE RETURN, U+000A LINE FEED 並び( CRLF ) ]で`連結する$ ◎ Let url string be the result of concatenating the strings in urls, in the order they were added, separated by a U+000D CARRIAGE RETURN U+000A LINE FEED character pair (CRLF).
    2. `~store$V の`~item~list$ddSに次を追加する ⇒ 新たな`~data~item$ — その ⇒# `型~文字列$dI ~SET `text/uri-list$l, `種類$dI ~SET `Text^i, `実際の~data$dI ~SET %~URL文字列 ◎ Add one item to the drag data store item list, with its properties set as follows: • The drag data item type string •• "text/uri-list" • The drag data item kind •• Text • The actual data •• url string
  12. `~store$V の`既定の~feedback$ddSを適切に更新する — %drag~対象 に応じて:

    • 選択である場合 ⇒ ~feedbackは,当の選択に基づくことになろう。
    • `要素$である場合 ⇒ 当の要素の描画が利用されることになろう。
    • `外部のもの$である場合 ⇒ ~UAは、 ~platform規約を利用して~feedbackを決定するベキである。
    ◎ Update the drag data store default feedback as appropriate for the user agent (if the user is dragging the selection, then the selection would likely be the basis for this feedback; if the user is dragging an element, then that element's rendering would be used; if the drag began outside the user agent, then the platform conventions for determining the drag feedback should be used).
  13. %~event ~LET `~DnD~eventを発火する$( `~source~node$V, `dragstart$et ) ◎ Fire a DND event named dragstart at the source node.
  14. ~IF[ %~event は`取消され$た ] ⇒ ~RET — ~DnD操作oは生じるベキでない ◎ If the event is canceled, then the drag-and-drop operation should not occur; return.

    注記: ~event~listenerが登録されていない~eventは、 ほぼ定義により,決して取消されないので、 ~DnDは,作者が特定的に防止しない限り常に利用者に可用になる。 ◎ Since events with no event listeners registered are, almost by definition, never canceled, drag-and-drop is always available to the user if the author does not specifically prevent it.

  15. `~source~node$V に向けて 名前 `pointercancel$et の`~pointer~eventを発火する$ — 加えて, `POINTEREVENTS$r にて要求される後続する~eventも発火する ◎ Fire a pointer event at the source node named pointercancel, and fire any other follow-up events as required by Pointer Events. [POINTEREVENTS]
  16. ~platform規約に整合な方式で,下に述べるとおりに`~DnD操作oが起動され$る: ◎ Initiate the drag-and-drop operation in a manner consistent with platform conventions, and as described below.

    ~DnD~feedbackは、[ `~store$V の`~bitmap$ddSが可用ならば それ / ~ELSE_ `~store$V の`既定の~feedback$ddS ]から生成するモノトスル — 前者の場合 ⇒ `~store$V の`~hot-spot座標$ddSも[ 結果の画像の中で~cursorをどこに置くかの~hint ]として利用するベキである。 値は、 画像の ( 左端, 上端 ) からの `~CSS~pixel$数による距離で表出するとする。 `CSS$r ◎ The drag-and-drop feedback must be generated from the first of the following sources that is available: ◎ The drag data store bitmap, if any. In this case, the drag data store hot spot coordinate should be used as hints for where to put the cursor relative to the resulting image. The values are expressed as distances in CSS pixels from the left side and from the top side of the image respectively. [CSS] ◎ The drag data store default feedback.

~UAは、 `~DnD操作oが起動され@ た時点から それが終するまでの間は: ◎ From the moment that the user agent is to initiate the drag-and-drop operation, until the end of the drag-and-drop operation,\

  • 装置~入力~event(例: ~mouseや~keyboard~event)は、 抑止するモノトスル。 ◎ device input events (e.g. mouse and keyboard events) must be suppressed.
  • 次に挙げるものを保持する — これらは、 以下に与える手続きに述べるとおり,~UAにより更新される: ◎ ↓

    `現在の~target要素@
    ~DnD操作oの~drop先として,現在~選択されている要素。 初期~時は ~NULL。 ◎ ↓
    `直の利用者~選択@
    ~drag操作oの間に,利用者により直に~drop~targetとして指示されている要素 【初期~時は~NULL。】 (利用者が選択できるのは要素のみであり、 他の~nodeは~drop~targetとして可用にしないモノトスル)。 しかしながら,`直の利用者~選択$は、 `現在の~target要素$になるとは限らない。 ◎ During the drag operation, the element directly indicated by the user as the drop target is called the immediate user selection. (Only elements can be selected by the user; other nodes must not be made available as drop targets.) However, the immediate user selection is not necessarily the current target element, which is the element currently selected for the drop part of the drag-and-drop operation.
    `直の利用者~選択$は、 利用者が異なる要素を選択するに伴い変化する (~pointing装置によりそれらを指すことにより, あるいは他の何らかの仕方で選択することにより)。 `直の利用者~選択$が変化するに伴い、 下に述べるように,文書~内の~event~listenerによる結果に基づいて,`現在の~target要素$も変化する。 ◎ The immediate user selection changes as the user selects different elements (either by pointing at them with a pointing device, or by selecting them in some other way). The current target element changes when the immediate user selection changes, based on the results of event listeners in the document, as described below.
    `現在の~target要素$, `直の利用者~選択$ の両者とも,途中で ~NULL になり得る — その場合、 どの~target要素も選択されていないことを意味する。 また、 いずれも[ 同じ~UA内の他の(~DOMに基づく)文書~内の要素, あるいは ~UA外の~program内の何か ]にもなり得る (例えば、 利用者は,~textを~text編集~programに~dragすることもできる。) ◎ Both the current target element and the immediate user selection can be null, which means no target element is selected. They can also both be elements in other (DOM-based) documents, or other (non-web) programs altogether. (For example, a user could drag text to a word-processor.) The current target element is initially null.
    `現在の~drag操作o@
    次に挙げるいずれかを値にとる — 初期~時は `none$op とする ⇒# `none@op, `copy@op, `link@op, `move@op ◎ In addition, there is also a current drag operation, which can take on the values "none", "copy", "link", and "move". Initially, it has the value "none". It is updated by the user agent as described in the steps below.

~UAは、 `~DnD操作oが起動され$たときは,次の手続きを並列的に走らすモノトスル:

【 明確化するため、 この訳では,原文の条文的な記述を~algo化して (加えて、いくつかの手続きに~~分割して) 記述している。 】

  1. %終したか ~LET ~F
  2. %手続き ~LET 次を遂行する手続き:

    1. ~IF[ 利用者は~DnD操作oを終させた (例:~mouse駆動な~DnD~UIの下で ~mouse~buttonを解放したなど) ] ⇒ %終したか ~SET ~T
    2. ~ELSE:

      1. %~event ~LET `~DnD~eventを発火する$( `~source~node$V, `drag$et )
      2. ~IF[ %~event は`取消され$た ]

        1. `現在の~drag操作o$ ~SET `none$op
        2. %終したか ~SET ~T
    3. ~IF[ %終したか ~EQ ~T ] ⇒ `~drag操作oの最終回~手続き$を走らす
    4. ~ELSE ⇒ `~drag操作oの継続~手続き$を走らす
  3. ~WHILE 無条件:

    1. %~task ~LET `~taskを~queueする$( 【`利用者~対話~task~source$?】, %手続き )
    2. %~task を遂行し終えるまで待機する
    3. ~IF[ %終したか ~EQ ~T ] ⇒ ~BREAK
    4. この反復の開始時から約 350ms(±200ms)以上 経過するまで待機する
◎ User agents must, as soon as the drag operation is initiated and every 350ms (±200ms) thereafter for as long as the drag operation is ongoing, queue a task to perform the following steps in sequence: • If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, return for this iteration (effectively "skipping missed frames" of the drag-and-drop operation). • Fire a DND event named drag at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation). • If the drag event was not canceled and the user has not ended the drag-and-drop operation, check the state of the drag-and-drop operation, as follows: ↓

`~drag操作oの継続~手続き@ は、 次を走らす: ◎ ↑

  1. %直の選択 ~LET 利用者が現在~drop~targetとして指示しているもの (何もなければ ~NULL ) ◎ ↓
  2. ~IF[ %直の選択 は、 前回までの`直の利用者~選択$から変化していない ] ⇒ ~RET ◎ ↓
  3. `直の利用者~選択$ ~SET %直の選択 ◎ ↓
  4. %前-~target ~SET `現在の~target要素$ ◎ ↓
  5. ~IF[ %直の選択 ~EQ %前-~target ] ⇒ ~RET ◎ ↓
  6. `現在の~target要素$ ~SET 次の手続きを走らせた結果: ◎ If the user is indicating a different immediate user selection than during the last iteration (or if this is the first iteration), and if this immediate user selection is not the same as the current target element, then update the current target element as follows:

    1. ~IF[ %直の選択 は`要素$でない ] ⇒ ~RET %直の選択 ◎ If the new immediate user selection is null • Set the current target element to null also. ◎ If the new immediate user selection is in a non-DOM document or application • Set the current target element to the immediate user selection.
    2. %~event ~LET `~DnD~eventを発火する$( %直の選択, `dragenter$et ) ◎ Otherwise ◎ Fire a DND event named dragenter at the immediate user selection.
    3. ~IF[ %~event は`取消され$た ] ⇒ ~RET %直の選択 ◎ If the event is canceled, then set the current target element to the immediate user selection. ◎ Otherwise, run the appropriate step from the following list:
    4. ~IF[ ~AND↓ ]…

      • %直の選択 は`~text編集-域$である
      • `~store$V の`~item~list$ddS内に次を満たす`~data~item$は在る ⇒ [ `型~文字列$dI ~EQ `text/plain$l ]~AND[ `種類$dI ~EQ `Text^i ]

      …ならば ⇒ ~RET %直の選択

      ◎ If the immediate user selection is a text control (e.g., textarea, or an input element whose type attribute is in the Text state) or an editing host or editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind text • Set the current target element to the immediate user selection anyway.
    5. %文書 ~LET %直の選択 の`~node文書$【!the Document】 ◎ ↓
    6. %body ~LET %文書 の`~body要素$ ◎ ↓
    7. ~IF[ %直の選択 ~EQ %body ] ⇒ ~RET %前-~target ◎ If the immediate user selection is the body element • Leave the current target element unchanged.
    8. `~DnD~eventを発火する$( [ %body ~NEQ ~NULL ならば %body / ~ELSE_ %文書 ], `dragenter$et ) ◎ Otherwise • Fire a DND event named dragenter at the body element, if there is one, or at the Document object, if not. Then, set the current target element to the body element, regardless of whether that event was canceled or not.
    9. ~RET %body
  7. %現-~target ~SET `現在の~target要素$ ◎ ↓
  8. ~IF[ %前-~target は`要素$である ]~AND[ %現-~target ~NEQ %前-~target ] ⇒ `~DnD~eventを発火する$( %前-~target, `dragleave$et, %現-~target ) ◎ If the previous step caused the current target element to change, and if the previous target element was not null or a part of a non-DOM document, then fire a DND event named dragleave at the previous target element, with the new current target element as the specific related target.
  9. ~IF[ %現-~target は`要素$である ]: ◎ If the current target element is a DOM element, then\

    1. %~event ~LET `~DnD~eventを発火する$( %現-~target, `dragover$et ) ◎ fire a DND event named dragover at this current target element.
    2. ~IF[ %~event は`取消され$なかった ]: ◎ If the dragover event is not canceled, run the appropriate step from the following list:

      1. ~IF[ ~AND↓ ]…

        • %現-~target は`~text編集-域$である
        • `~store$V の`~item~list$ddS内に次を満たす`~data~item$は在る ⇒ [ `型~文字列$dI ~EQ `text/plain$l ]~AND[ `種類$dI ~EQ `Text^i ]

        …ならば ⇒ `現在の~drag操作o$ ~SET [ `copy$op, `move$op ]のうち,~platform規約に適切な方

        ◎ If the current target element is a text control (e.g. textarea, or an input element whose type attribute is in the Text state) or an editing host or editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind text • Set the current drag operation to either "copy" or "move", as appropriate given the platform conventions.
      2. ~ELSE ⇒ `現在の~drag操作o$ ~SET `none$op ◎ Otherwise • Reset the current drag operation to "none".
    3. ~ELSE ( %~event は`取消され$た) ⇒ `現在の~drag操作o$ ~SET %~event の `dataTransfer$m 属性~値の ( `effectAllowed$m, `dropEffect$m ) 属性~値に応じて,次の表tの 3 列目に与えられる値: ◎ Otherwise (if the dragover event is canceled), set the current drag operation based on the values of the effectAllowed and dropEffect attributes of the DragEvent object's dataTransfer object as they stood after the event dispatch finished, as per the following table:

      `effectAllowed$m `dropEffect$m ~drag操作o
      `uninitialized$tE, `copy$tE, `copyLink$tE, `copyMove$tE, `all$tE `copy$tD `copy$op
      `uninitialized$tE, `link$tE, `copyLink$tE, `linkMove$tE, `all$tE `link$tD `link$op
      `uninitialized$tE, `move$tE, `copyMove$tE, `linkMove$tE, `all$tE `move$tD `move$op
      その他の場合 `none$op
      ◎ effectAllowed|dropEffect|Drag operation "uninitialized", "copy", "copyLink", "copyMove", or "all"|"copy"|"copy" "uninitialized", "link", "copyLink", "linkMove", or "all"|"link"|"link" "uninitialized", "move", "copyMove", "linkMove", or "all"|"move"|"move" Any other case|"none"
  10. ~ELSE ( %現-~target は`要素$でない) ⇒ `現在の~drag操作o$ ~SET ~platformに特有な仕組みを利用して,どの~drag操作oを遂行するかを決定した結果 ( `none^l, `copy^l, `link^l, `move^l のいずれか) ◎ Otherwise, if the current target element is not a DOM element, use platform-specific mechanisms to determine what drag operation is being performed (none, copy, link, or move), and set the current drag operation accordingly.
  11. 次に従って、 `現在の~drag操作o$に合致するように ~drag~feedback(例: ~mouse~cursor)を更新する: ◎ Update the drag feedback (e.g. the mouse cursor) to match the current drag operation, as follows:

    ~drag操作o ◎ Drag operation ~feedback ◎ Feedback
    `copy$op ここに~dropされた~dataは複製される。 ◎ Data will be copied if dropped here.
    `link$op ここに~dropされた~dataは~linkされる。 ◎ Data will be linked if dropped here.
    `move$op ここに~dropされた~dataは移動される。 ◎ Data will be moved if dropped here.
    `none$op 許容される操作oはない。 ここに~dropされたときには,~DnD操作oは取消される。 ◎ No operation allowed, dropping here will cancel the drag-and-drop operation.

この節に述べる~DnD操作oの[ 継続/最終回 ]手続きの目的においては、 次のいずれかに該当するものが `~text編集-域@ とされる:

  • ~text~control (例: `textarea$e 要素, [ `input$e 要素のうち[ その `type$a 属性の状態 ~EQ `Text$st ]を満たすもの ]など)
  • `編集中の~host$
  • `編集-可能$な要素
◎ ↑↓

`~drag操作oの最終回~手続き@ は、 次を走らす: ◎ Otherwise, if the user ended the drag-and-drop operation (e.g. by releasing the mouse button in a mouse-driven drag-and-drop interface), or if the drag event was canceled, then this will be the last iteration. Run the following steps, then stop the drag-and-drop operation:

  1. %現-~target ~SET `現在の~target要素$ ◎ ↓
  2. %~dropされたか ~LET ~IS ~NOT ~OR↓ (~drag操作oは成功したか否か)

    • `現在の~drag操作o$ ~EQ `none$op
    • 利用者が~DnD操作oを取消して終させた (例: `Escape^kY ~UIkeyを叩いたなど)
    • %現-~target ~EQ ~NULL
    ◎ If the current drag operation is "none" (no drag operation), or, if the user ended the drag-and-drop operation by canceling it (e.g. by hitting the Escape key), or if the current target element is null, then the drag operation failed. Run these substeps:
  3. ~IF[ %~dropされたか ~EQ ~F ]: ◎ Let dropped be false.

    1. ~IF[ %現-~target は`要素$である ] ⇒ `~DnD~eventを発火する$( %現-~target, `dragleave$et ) ◎ If the current target element is a DOM element, fire a DND event named dragleave at it;\
    2. ~ELIF[ %現-~target ~NEQ ~NULL ] ⇒ ~drag取消n用の~platformに特有な規約を利用する ◎ otherwise, if it is not null, use platform-specific conventions for drag cancelation.
    3. `現在の~drag操作o$ ~SET `none$op ◎ Set the current drag operation to "none".
  4. ~ELSE(~drag操作oはおよそ成功した): ◎ Otherwise, the drag operation might be a success; run these substeps: ◎ Let dropped be true.

    1. ~IF[ %現-~target は`要素$でない ] ⇒ ~platformに特有な規約を利用して,~dropを指示する ◎ ↓
    2. ~ELSE ◎ If the current target element is a DOM element,\

      1. %~event ~LET `~DnD~eventを発火する$( %現-~target, `drop$et ) ◎ fire a DND event named drop at it; otherwise, use platform-specific conventions for indicating a drop.
      2. ~IF[ %~event は`取消され$た ] ⇒ `現在の~drag操作o$ ~SET %~event の `dataTransfer$m 属性~値の `dropEffect$m 属性~値 ◎ If the event is canceled, set the current drag operation to the value of the dropEffect attribute of the DragEvent object's dataTransfer object as it stood after the event dispatch finished.
      3. ~ELIF[ ~AND↓ ]: ◎ Otherwise, the event is not canceled; perform the event's default action, which depends on the exact target as follows:

        • %現-~target は`~text編集-域$である
        • `~store$V の`~item~list$ddS内に次を満たす`~data~item$は在る ⇒ [ `型~文字列$dI ~EQ `text/plain$l ]~AND[ `種類$dI ~EQ `Text^i ]
        ◎ If the current target element is a text control (e.g., textarea, or an input element whose type attribute is in the Text state) or an editing host or editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind text

        …ならば( %~event の既定~動作を遂行する) ⇒ [ そのような`~data~item$のうち,`~store$V の`~item~list$ddS内で最初のもの ]の`実際の~data$dIを,~platformに特有な規約に整合な方式で, %現-~target の中に挿入する (例: 現在の~mouse~cursor位置-の所に挿入する / ~fieldの末尾に挿入する。) ◎ Insert the actual data of the first item in the drag data store item list to have a drag data item type string of "text/plain" and a drag data item kind that is text into the text control or editing host or editable element in a manner consistent with platform-specific conventions (e.g. inserting it at the current mouse cursor position, or inserting it at the end of the field).

      4. ~ELSE ⇒ `現在の~drag操作o$ ~SET `none$op ◎ Otherwise • Reset the current drag operation to "none".
  5. `~DnD~eventを発火する$( `~source~node$V, `dragend$et ) — ~eventの既定~動作として以下を行う: ◎ Fire a DND event named dragend at the source node. ◎ Run the appropriate steps from the following list as the default action of the dragend event:

    1. ~IF[ ~AND↓ ]…

      • %~dropされたか ~EQ ~T
      • `現在の~drag操作o$ ~EQ `move$op
      • %現-~target は~text~controlである(下を見よ)

      …ならば:

      1. ~IF[ ~DnD操作oの~sourceは,ある`編集中の~host$の中に全体が包含されているような,~DOM内の選択である ] ⇒ `選択を削除-$する
      2. ~ELIF[ ~DnD操作oの~sourceは、 ある~text~control内の選択である ] ⇒ ~UAは、 ~dragされた選択を,当の~text~controlから削除するベキである
      ◎ If dropped is true, the current target element is a text control (see below), the current drag operation is "move", and the source of the drag-and-drop operation is a selection in the DOM that is entirely contained within an editing host • Delete the selection. ◎ If dropped is true, the current target element is a text control (see below), the current drag operation is "move", and the source of the drag-and-drop operation is a selection in a text control • The user agent should delete the dragged selection from the relevant text control.
    2. ~ELIF[ %~dropされたか ~EQ ~F ]~OR[ `現在の~drag操作o$ ~EQ `none$op ] ⇒ ~dragは取消された — ~platform規約にて,取消されたことを利用者に向けて表現するものと規定されているならば、 そうする (例: ~dragされた選択を,~DnD操作oの~sourceに戻すように~animateするなど) ◎ If dropped is false or if the current drag operation is "none" ◎ The drag was canceled. If the platform conventions dictate that this be represented to the user (e.g. by animating the dragged selection going back to the source of the drag-and-drop operation), then do so.
    3. ~ELSE ⇒ (既定~動作なし) ◎ Otherwise ◎ The event has no default action.

    この段の目的においては、[ `textarea$e 要素/次を満たす `input$e 要素 ]が~text~controlであるとされる ⇒ その `type$a 属性の状態 ~IN { `Text$st, `Search$st, `Tel$st, `Url$st, `Email$st, `Password$st, `Number$st } 【!この~text~controlと~text編集-域$の~text~controlが同じものを指すのかどうかは、はっきりしない。】 ◎ For the purposes of this step, a text control is a textarea element or an input element whose type attribute is in one of the Text, Search, Tel, URL, Email, Password, or Number states.

注記: ~UAには、 ~scroll可能な領域の辺に近い~dragに対し,どう反応するか考慮することが奨励される。 例えば,利用者がある~drag対象を長い~pageの`表示域$の下端~近くに~dragした場合、[ ~pageを~scrollして,利用者がその対象を~pageの~~下方へ~dropできるようにする ]ことはイミを成すであろう。 ◎ User agents are encouraged to consider how to react to drags near the edge of scrollable regions. For example, if a user drags a link to the bottom of the viewport on a long page, it might make sense to scroll the page so that the user can drop the link lower on the page.

注記: この~modelは、 ~nodeを孕んでいる`文書$からは独立である — 操作oに孕まれる文書がいくつあろうが、 上で述べたとおりに,~eventは発火され, 処理~modelを走らす。 ◎ This model is independent of which Document object the nodes involved are from; the events are fired as described above and the rest of the processing model runs as described above, irrespective of how many documents are involved in the operation.

6.11.6. ~event要約

◎非規範的

~DnD~modelには、 次に挙げる~eventが孕まれる: ◎ The following events are involved in the drag-and-drop model.

~event名 ~target 取消~可否 `~mode$ddS `dropEffect$m 既定~動作
`dragstart@et `~source~node$V `可書~mode$i `none$tD ~DnD操作oを起動する
`drag@et `~source~node$V `保護d~mode$i `none$tD ~DnD操作oを継続する
`dragenter@et `直の利用者~選択$/`~body要素$ `保護d~mode$i `effectAllowed$m の`値に基づく@#dropEffect-initialisation$ `現在の~target要素$になり得るものとして,`直の利用者~選択$は却下する
`dragleave@et 前回の,`現在の~target要素$ 不可 `保護d~mode$i `none$tD なし
`dragover@et `現在の~target要素$ `保護d~mode$i `effectAllowed$m の`値に基づく@#dropEffect-initialisation$ `現在の~drag操作o$を `none$op に設定し直す
`drop@et `現在の~target要素$ `読専~mode$i `現在の~drag操作o$ 文脈依存
`dragend@et `~source~node$V 不可 `保護d~mode$i `現在の~drag操作o$ 文脈依存
◎ Event name|Target|Cancelable?|Drag data store mode|dropEffect|Default Action dragstart|Source node|✓ Cancelable|Read/write mode|"none"|Initiate the drag-and-drop operation drag|Source node|✓ Cancelable|Protected mode|"none"|Continue the drag-and-drop operation dragenter|Immediate user selection or the body element|✓ Cancelable|Protected mode|Based on effectAllowed value|Reject immediate user selection as potential target element dragleave|Previous target element|—|Protected mode|"none"|None dragover|Current target element|✓ Cancelable|Protected mode|Based on effectAllowed value|Reset the current drag operation to "none" drop|Current target element|✓ Cancelable|Read-only mode|Current drag operation|Varies dragend|Source node|—|Protected mode|Current drag operation|Varies

これらの~eventは、 どれも:

  • 浮上する。
  • ~composed。
  • その `effectAllowed$m 属性は、 配送される前は既定の値 `uninitialized$tE をとり, その後は `dragstart$et ~eventを配送した結果の値をとり続ける。
◎ All of these events bubble, are composed, and the effectAllowed attribute always has the value it had after the dragstart event, defaulting to "uninitialized" in the dragstart event.

6.11.7. `draggable^a 属性

`draggable@a 内容~属性は、 すべての`~HTML要素$に設定できる。 ◎ All HTML elements may have the draggable content attribute set.\

この属性は,`列挙d属性$であり、 次に挙げる~keyword, とり得る状態, それらの対応付けが定義される: ◎ The draggable attribute is an enumerated attribute with the following keywords and states:

~keyword 状態 概略的な記述
`true@v `~T@st 要素は~drag可能になる。
`false@v `~F@st 要素は~drag可能にならない。
`自動@st ~UAの既定の挙動を利用する。

[ `欠落~値~用の既定の状態$/`妥当でない値~用の既定の状態$ ]は、 `自動$st とする。

◎ Keyword|State|Brief description true|true|The element will be draggable. false|false|The element will not be draggable. ◎ The attribute's missing value default and invalid value default are both the auto state. The auto state uses the default behavior of the user agent.

`draggable$a 属性を有する要素は、 視覚的でないヤリトリ用に, `title$a 属性で命名されるベキである。 ◎ An element with a draggable attribute should also have a title attribute that names the element for the purpose of non-visual interactions.

%element.`draggable$m [ = %value ]
[ 要素は~drag可能ならば ~T / ~ELSE_ ~F ]を返す。 ◎ Returns true if the element is draggable; otherwise, returns false.
設定して既定の値を上書きした上で `draggable$a 内容~属性を設定できる。 ◎ Can be set, to override the default and set the draggable content attribute.

`draggable@m ~IDL属性は、 要素が~drag可能になるかどうかを制御する: ◎ The draggable IDL attribute,\

  • その値は、 下に述べる仕方で要素の `draggable$a 内容~属性に依存する。 ~drag可能になるものは,一般には~text選択に限られるが、 この~IDL属性が ~T に設定された要素も~drag可能になる。 ◎ whose value depends on the content attribute's in the way described below, controls whether or not the element is draggable. Generally, only text selections are draggable, but elements whose draggable IDL attribute is true become draggable as well.
  • その取得子~手続きは ⇒ ~RET コレの `draggable$a 内容~属性の状態に応じて ⇒# `~T$st ならば ~T / `~F$st ならば ~F / `自動$st ならば ~IS[コレは次に挙げるいずれかである]⇒# `img$e 要素/ 画像を`表現-$する `object$e 要素/ `href$a 内容~属性を有する `a$e 要素 ◎ If an element's draggable content attribute has the state true, the draggable IDL attribute must return true. ◎ Otherwise, if the element's draggable content attribute has the state false, the draggable IDL attribute must return false. ◎ Otherwise, the element's draggable content attribute has the state auto. If the element is an img element, an object element that represents an image, or an a element with an href content attribute, the draggable IDL attribute must return true; otherwise, the draggable IDL attribute must return false.

  • その設定子~手続きは ⇒ コレの `draggable$a 内容~属性を,所与の値に応じて[ ~F ならば `false^l / ~T ならば `true^l ]に設定する ◎ If the draggable IDL attribute is set to the value false, the draggable content attribute must be set to the literal value "false". If the draggable IDL attribute is set to the value true, the draggable content attribute must be set to the literal value "true".

6.11.8. ~DnD~modelにおける~security~risk

~UAは、 `drop$et ~eventを配送するまで,[ `dragstart$et ~eventの間に `DataTransfer$I ~objに追加された~data ]を~scriptから可用にしないモノトスル — さもなければ、[ 利用者がある文書から別の文書へ敏感な情報を~dragしていて,その途上で また別の敵対的な文書を通過するとき ]に,~dataが傍受され得ることになるので。 ◎ User agents must not make the data added to the DataTransfer object during the dragstart event available to scripts until the drop event, because otherwise, if a user were to drag sensitive information from one document to a second document, crossing a hostile third document in the process, the hostile document could intercept the data.

同じ理由から,~UAは、[ 利用者が特定的に~drag操作oを終させた場合に限り,~dropは成功した ]と見なすことが要求される — [ ~scriptが終させたどの~drag操作oも,成功しなかった(取消された) ]ものと見なして、 `drop$et ~eventを発火しないことが要求される。 ◎ For the same reason, user agents must consider a drop to be successful only if the user specifically ended the drag operation — if any scripts end the drag operation, it must be considered unsuccessful (canceled) and the drop event must not be fired.

~UAは、 ~DnD操作oが~script動作に呼応して開始されないよう,~careするベキである。 例えば,~mouseと~UIwindowを備える環境の下で、 利用者が~mouse~button押下げている間に,~scriptが~UIwindowを移動した場合、 ~UAは,それを~dragの開始と見なさないようにすることが重要になる。 さもなければ、 敏感な~sourceから — 利用者の同意なく — ~dataが~dragされ,敵対的な文書の中へ~dropされかねないので。 ◎ User agents should take care to not start drag-and-drop operations in response to script actions. For example, in a mouse-and-window environment, if a script moves a window while the user has their mouse button depressed, the UA would not consider that to start a drag. This is important because otherwise UAs could cause data to be dragged from sensitive sources and dropped into hostile documents without the user's consent.

~UAは、 何かが[ ~drag/~drop ]される際には,[ 安全なことが既知な特能たちが成す~list ]を利用して[ 能動的になり得る(~scriptなど)内容(例:~HTML)を~filterする ]ベキである。 類似に,`相対~URL$に対しては、 その参照~先が期待されない仕方で変化しないよう,`絶対~URL$に転化するベキである。 この仕様は、 これをどう遂行するかについては指定しない。 ◎ User agents should filter potentially active (scripted) content (e.g. HTML) when it is dragged and when it is dropped, using a safelist of known-safe features. Similarly, relative URLs should be turned into absolute URLs to avoid references changing in unexpected ways. This specification does not specify how this is performed.

敵対的な~pageが、 ある内容を供していて,[ 利用者にその内容を選択させた上で, 被害~pageの `contenteditable$a 領域へ~dragして~dropさせる (または,~~実際に~copyして~pasteさせる) ]ことを考える。 ~browserが,安全な内容に限り~dragされることを確保しなかった場合、[ 被害~siteの中に~dropされた(または ~pasteされた)選択 ]内の[ 安全でないものになり得る内容 ] — ~scriptや~event~handlerなど — は,被害~siteの特権を取得することになり, ~XSS攻撃を可能化することになる。 ◎ Consider a hostile page providing some content and getting the user to select and drag and drop (or indeed, copy and paste) that content to a victim page's contenteditable region. If the browser does not ensure that only safe content is dragged, potentially unsafe content such as scripts and event handlers in the selection, once dropped (or pasted) into the victim site, get the privileges of the victim site. This would thus enable a cross-site scripting attack.