Drag and drop

6.7.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.

<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標的が~dropを受容するためには、次に挙げる~eventを~listenする必要がある。 ◎ To accept a drop, the drop target has to listen to the following events:

1. `dragenter$et ~event~handlerは、その~eventを取消すことにより，~drop標的は~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を受容するか却下するかの，最後の機会になる。 ~dropが受容された場合、~event~handlerは，標的~上で~drop演算を遂行し~MUST。 ~sourceが `dropEffect$m 属性の値を利用できるようにするためには、この~eventは取消される必要がある。 他の場合、~drop演算は却下される。 【代わりに，~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.

<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.

<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.7.2. ~drag~data~store

~DnD演算に下層にある~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@dS （ `items$m ）

【 原文による正式な呼称は “drag data store item list” 。 この訳では， “drag data store” の部分は省略する（この頁の中では、 “~item~list” が他の意味に用いられることはない）。 他の項目についても同様。 】

~dragされた~dataを表現している一連の `~item@ （ ~drag~data~item ）からなる~listであり，各~itemは次の情報からなる： ◎ A drag data store item list, 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の種類を表す。 次のいずれかを値にとる：

`素の~Unicode文字列^i

~text

`File^i

~file名も伴われる~binary~data。

◎ The kind of data: ◎ • Plain Unicode string •• Text. • File •• Binary data with a file name.

`型~文字列@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.

［ `種類$dI ~EQ `素の~Unicode文字列^i ］なる`~item$に対しては、その`型~文字列$dIごとに 1 個までとする制限-がある。 【すなわち，この種類の~itemの`型~文字列$dIは、同じ`~item~list$dS内で一意になる。】 ◎ There is a limit of one Plain Unicode string item per item type string.

`実data@dI ◎ The actual data

~Unicodeまたは~binary文字列であり， 一部の事例では、`~item$の`種類$dIに応じて，~file名（それ自体も~Unicode文字列）も伴われる。 ◎ A Unicode or binary string, in some cases with a file name (itself a Unicode string), as per the drag data item kind.

`~item~list$dSにおける各`~item$の順序は、`~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@dS （ `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@dS と `~hot-spot座標@dS （ `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@dS ◎ A drag data store mode, which is one of the following:

`~drag~data~store$に対し行える演算は、~modeに依存する。 次のいずれかを値にとる： ◎ ↓

`可書~mode@i ◎ Read/write mode

`dragstart$et ~event専用。 この~modeの下では、新たな~dataを`~item~list$dSに追加できる。 ◎ 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$dS内の各`~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$dS内の各`~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@dS （ `effectAllowed$m ） ◎ A drag data store allowed effects state, which is a string.

文字列。 【詳細】

6.7.3. `DataTransfer^I ~interface

`DataTransfer$I ~objは、~DnD演算の下層にある`~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,
Constructor]
interface `DataTransfer@I {
  attribute DOMString `dropEffect$m;
  attribute DOMString `effectAllowed$m;

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

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

  /* old interface */
  readonly attribute FrozenArray<DOMString> `types$m;
  DOMString `getData$m(DOMString %format);
  void `setData$m(DOMString %format, DOMString %data);
  void `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 ]

現在~選択されている演算の種類を返す。 演算の種類が `effectAllowed$m 属性に許容されるものでない場合、演算は失敗することになる。 ◎ 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.

設定して、選択されている演算を変更できる。 ◎ 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 ]

許容されている演算の種類を返す。 ◎ Returns the kinds of operations that are to be allowed.

（ `dragstart$et ~eventの間に）設定して、許容される演算を変更できる。 ◎ 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(element, x, y)$m

所与の要素を~drag~feedbackを更新するために利用する — 以前に指定された~feedbackは置換される。 ◎ Uses the given element to update the drag feedback, replacing any previously specified feedback.

%dataTransfer . `types$m

`dragstart$et ~eventにて設定された形式を~listする`凍結~配列$を返す。 加えて，何らかの~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 の一環で作成された `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の配送-後は、特殊~値 ε が結付けられる（そのように、この訳では形式化して記述する）。 】

1. %L ~LET 空~list ◎ 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$dS ◎ ↓
   2. %~item~list 内の ~EACH ( %~item ) に対し ⇒ ~IF［ %~item の`種類$dI ~EQ `素の~Unicode文字列^i ］ ⇒ ~itemの`型~文字列$dIを %L に追加する ◎ For each item in the DataTransfer object's drag data store item list whose kind is Plain Unicode string, add an entry to L consisting of the item's type string.
   3. ~IF［ %~item~list 内に［ `種類$dI ~EQ `File^i ］なる %~item がある ］ ⇒ 文字列 `Files^l を %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 の`~types配列$ ~SET %L を内容とする~IDL `sequence<DOMString>^c 型~値から`凍結~配列を作成-$した結果 ◎ 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 ε ならば その`~mode$dS ／ ~ELSE_ `不能化~mode@i ］を返す。

所与の文字列 %形式 を `正規化-@ するときは、次を走らす：

1. %形式 ~SET `~ASCII小文字~化する$( %形式 )

2. ~RET %形式 に応じて，次で与えられる値：

   `text^l

   `text/plain^l

   `url^l

   `text/uri-list^l

   その他

   %形式

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

`DataTransfer()@m

この構築子の被呼出時には、次を走らせ~MUST：

1. %~store ~LET 新たな`~drag~data~store$
2. %~store の`~item~list$dS ~SET 空~list
3. %~store の`~mode$dS ~SET `可書~mode$i
4. %O ~LET 新たな `DataTransfer$I ~obj
5. %O に %~store を結付ける
6. %O の `dropEffect$m ~SET `none^l
7. %O の `effectAllowed$m ~SET `none^l
8. ~RET %O

◎ 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演算の間に利用者に示される~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.＼

取得子は、最後に設定された値を返さ~MUST。 ◎ On getting, it must return its current value.＼

設定子は、次を走らせ~MUST：

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 属性を初期化するときに利用される。 この属性は、此れの作成-時に，ある文字列~値（下の “設定子” に示されるいずれか）に設定される。 ◎ 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.＼

取得子は、最後に設定された値を返さ~MUST。 ◎ On getting, it must return its current value.＼

設定子は、次を走らせ~MUST

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

取得子は、此れに結付けられている `DataTransferItemList$I ~objを返さ~MUST。 ◎ The items attribute must return a DataTransferItemList object associated with the DataTransfer object.

`setDragImage(element, x, y)@m

被呼出時には、次の手続きを走らせ~MUST： ◎ The setDragImage(element, 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$dS ~SET［ %element は `img$e 要素であるならば %element の画像（その~sizeは画像の`内在的~size$による）／ ~ELSE_ %element から生成される画像（そうするための正確な仕組みは、まだ仕様化されていない） ］ ◎ If element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic 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座標$dS ~SET 座標 ( %x, %y ) ◎ Set the drag data store hot spot coordinate to the given x, y coordinate.

`types@m

取得子は、此れの`~types配列$を返さ~MUST。 ◎ The types attribute must return this DataTransfer object's types array.

`getData(format)@m

被呼出時には、次の手続きを走らせ~MUST： ◎ 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, return the empty string. ◎ If the drag data store's mode is the protected mode, then return the empty string.
2. %~item ~LET 此れの`~drag~data~store$の`~item~list$dS内に，次を満たす`~item$は［ 在るならば それ（一意に定まる） ／ 無いならば ε ］ ⇒ ［ `種類$dI ~EQ `素の~Unicode文字列^i ］~AND［ `型~文字列$dI ~EQ %format を`正規化-$した結果 ］ ◎ 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 Plain Unicode string and whose type string is equal to format, return the empty string.
3. ~IF［ %~item ~EQ ε ］ ⇒ ~RET 空~文字列 ◎ ↑
4. %結果 ~LET %~item の`実data$dI ◎ 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.
5. ~IF［ `~ASCII小文字~化する$( %format ) ~EQ `url^l ］ ⇒ ~RET ［［ %結果 を `RFC2483$r に則って， `text/uri-list^l に対し適切に構文解析した結果の~list ］が空でなければ その中の最初の~URL ／ ~ELSE_ 空~文字列 ］† ◎ 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]
6. ~RET %結果 ◎ Return result.

【† %format に `text/uri-list^l が渡された場合と（`正規化-$した結果は同じでも）ふるまいが異なる。 】

`setData(format, data)@m

被呼出時には、次の手続きを走らせ~MUST： ◎ 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$dS ◎ ↓
4. %~item~list から次を満たす`~item$を除去する ⇒ ［ `種類$dI ~EQ `素の~Unicode文字列^i ］~AND［ `型~文字列$dI ~EQ %形式 ］ ◎ Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one.
5. %~item~list に，次のようにされた新たな`~item$を追加する ⇒＃ `種類$dI ~SET `素の~Unicode文字列^i； `型~文字列$dI ~SET %形式； `実data$dI ~SET %data ◎ Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument.

【 除去した上で，追加するので、 %~item~list 内での当の~itemの~indexも変化することになる（本当か？）。 】

`clearData(format)@m

被呼出時には、次の手続きを走らせ~MUST： ◎ The clearData() 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. 此れの`~drag~data~store$の`~item~list$dSから 次をいずれも満たす`~item$すべてを除去する：

   • `種類$dI ~EQ `素の~Unicode文字列^i
   • %format は与えられて［ いないならば 無条件 ／ いるならば ［ `型~文字列$dI ~EQ %format を`正規化-$した結果 ］］
   ◎ 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. ◎ 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". ◎ Remove the item in the drag data store item list whose kind is Plain Unicode string 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

取得子は、［ 次の手続きから返される， `File$I ~objの~list ］を表現する，`~live$ `FileList$I ~objを返さ~MUST。 加えて、所与の ( `FileList$I ~obj, 下層の~file ) に対しては，毎回~同じ `File$I ~objが利用され~MUST： ◎ 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$dS内の~EACH( `~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 ◎ The files found by these steps are those in the list L.

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

[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);
  void `remove$m(unsigned long %index);
  void `clear$m();
};

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

callback `FunctionStringCallback@I = void (DOMString %data);

6.7.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,
Constructor(DOMString %type, optional `DragEventInit$I %eventInitDict)]
interface `DragEvent@I : `MouseEvent$I {
  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には、~DnDの間に，~browserが その処理と保安~modelを協調する~~仕組みがあるので。 ◎ 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

取得子は、初期化-時の値を返さ~MUST。 それは、当の~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型, %関係する標的 （省略時は ~NULL ） ) に対し，次の手続きを走らせ~MUST： ◎ 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演算に関わるすべての~eventは、この手続きを通して発火される。 】【 以下における `~store$V は、 ~DnD処理~model節 にて作成される`~drag~data~store$を指す（同じ~DnD演算から生じる各~event間で共有される）。 】

1. %~storeは変化した ~LET ~F ◎ Let dataDragStoreWasChanged be false.
2. %~window ~LET %要素 の `Document$I ~objの `Window$I ~obj ◎ If no specific related target was provided, set related target to null. ◎ Let window be the Window object of the Document object of the specified target element.
3. ~IF［ %~event型 ~EQ `dragstart$et ］ ⇒ %~storeは変化した ~SET ~T ◎ ↓
4. `~store$V の`~mode$dS ~SET %~event型 に応じて ⇒ `dragstart$et ならば `可書~mode$i ／ `drop$et ならば `読専~mode$i ／ ~ELSE_ `保護d~mode$i（`作成-$dS時のまま） ◎ 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$dS ◎ 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

   `dragexit$et

   `dragleave$et

   `none$tD

   `drop$et

   `dragend$et

   `現在の~drag演算$

   `dragenter$et

   `dragover$et

   下の表の［ 1 列目に示される `effectAllowed$m 属性の値 ］に応じて、同じ行の：

   • 2 列目に示される値, または、場合によっては
   • 3 列目の`代替-選択肢$に与えられるいずれかの値（空欄は選択肢なし）

   ◎ Set the dropEffect attribute to "none" if e is dragstart, drag, dragexit, 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) ◎ "uninitialized" when what is being dragged is a selection from a text control	`move$tD	`copy$tD, `link$tD
   `uninitialized$tE (2) ◎ "uninitialized" when what is being dragged is a selection	`copy$tD	`link$tD, `move$tD
   `uninitialized$tE (3) ◎ "uninitialized" when what is being dragged is an a element with an href attribute	`link$tD	`copy$tD, `move$tD
   他の場合 ◎ Any other case	`copy$tD	`link$tD, `move$tD

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

   • (1) ~text~controlからの選択
   • (2) 選択の場合
   • (3) `href$a 属性を有する `a$e 要素

   ◎ ↑

   上の表にて `代替-選択肢@ が供されている所では、［ ~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" ~keyを押しながら~dragしたときは、移動-や複製-でなく，~dataへ~linkすることが選好されている。 したがって Windows ~system上では、`代替-選択肢$に `link$tD がある所では、 "alt" ~keyが押下げられている間，~UAは `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 `DragEvent$I を用いて`~eventを作成-$した結果： ◎ Let event be the result of creating an event using DragEvent.

10. %~event の各種~属性を次に従って初期化する：

    1. `~type0$m ~SET %~event型
    2. `bubbles$m ~SET ~T
    3. `view$m ~SET %~window
    4. `relatedTarget$m ~SET %関係する標的
    5. `dataTransfer$m ~SET %dataTransfer
    6. ~IF［ %~event型 ~NIN { `dragexit^et, `dragleave^et, `dragend^et } ］ ⇒ `cancelable$m ~SET ~T
    7. 各種~mouse／~key属性は、入力~装置の状態に則って，利用者~対話~event `UIEVENTS$r に対するときと同様に初期化する
    8. 関連する~pointing装置がない場合は、次の属性も初期化する ⇒ ( `screenX^m, `screenY^m, `clientX^m, `clientY^m, `button^m ) ~SET ( 0, 0, 0, 0, 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 dragexit, 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 を`配送-$する ◎ Dispatch event at the specified target element.
12. `~store$V に`許容される効果state$dS ~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$dS ~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 は `取消され@ た” という記述は、おそらく［ `配送-$した結果 ~EQ ~F ］（ %~event の `取消d~flag$ ~EQ ~ON ）になったことを意味する。 】

6.7.5. 処理~model

利用者が~drag演算を始めようと試みたときは、~UAは，次の手続きを走らせ~MUST。 ~UAは、当の~dragが実際には別の文書または~app内から開始されていて，［ 自身から見える~~範囲の下で，~dragが文書に交差する ］まで それを感知できなかった場合でも、この手続きが走っていたかのように動作し~MUST： ◎ 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対象 を決定する： ◎ Determine what is being dragged, as follows:

   1. ~IF［ ~drag演算は、選択~上で呼出された ］ ⇒ %~drag対象 ~SET その選択 ◎ If the drag operation was invoked on a selection, then it is the selection that is being dragged.

   2. ~ELIF［ ~drag演算は、 `Document$I 上で呼出された ］：

      1. %~node ~LET 利用者が~dragし始めようとしている~node
      2. ~IF［［ %~node, および その先祖 ］のうち［ `draggable$m ~IDL属性 ~EQ ~T ］なる要素はある ］ ⇒ %~drag対象 ~SET そのような要素のうち， %~node に最も近いもの
      3. ~ELSE ⇒ ~RET — 何も~dragされていないので、~DnD演算は開始されない。
      ◎ 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.
   3. ~ELSE（ ~drag演算は、~UAの外側から呼出された） ⇒ %~drag対象 ~SET ~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.

   注記： ［ `img$e 要素 ／ `href$a 属性を有する `a$e 要素 ］の `draggable$m 属性 は既定で ~T に設定される。 ◎ img elements and a elements with an href attribute have their draggable attribute set to true by default.

2. `~store@V ~LET 新たな`~drag~data~store$を`作成-$dSした結果 — この節の手続きにて発火される すべての~DND~eventは、この `~store$V を利用し~MUST。 ◎ Create a drag data store. All the DND events fired subsequently by the steps in this section must use this drag data store.

3. `~source~node@V ~SET %~drag対象 に応じて、次で与えられる~node： ◎ Establish which DOM node is the source node, as follows:

   選択

   利用者が~dragを開始した `Text$I ~node ◎ ↓

   これは概して，利用者が最初に~clickした `Text$I ~nodeになるが、利用者が特定0の~nodeを指定しなかった場合には（例えば利用者は、単に， “現在の選択” を~dragし始めるよう~UAに伝えた場合）、 “現在の選択” のある部分を包含しているような，最初の `Text$I ~nodeになる。 ◎ If it is a selection that is being dragged, then the source node is the Text node that the user started the drag on (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.

   【 何が選択を表現するのか定義されていないが、選択されている範囲を表現する~DOM`範囲~obj$と考えればよいであろう。 】

   要素

   %~drag対象 ◎ Otherwise, if it is an element that is being dragged, then the source node is the element that is being dragged.

   `外部のもの$

   なし（ %~drag対象 は別の~appの一部である ） — この仕様が `~source~node$V に向けて~eventを発火するよう要求する所では、~UAは，代わりに その状況に関連する~platform特有な規約に従わ~MUST。 ◎ Otherwise, the source node is part of another document or application. 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演算の最中には、 `~source~node$V に向けて複数の~eventが発火される。 ◎ Multiple events are fired on the source node during the course of the drag-and-drop operation.

4. `被~drag~node~list@V ~SET %~drag対象 に応じて、次で与えられる~list： ◎ Determine the list of dragged nodes, as follows:

   選択

   ［ その選択~内に部分的にまたは完全に含まれている† ］すべての~nodeを包含する，`木~順序$による~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$に 部分的に または 全部的に 包含されている~node。 】

   要素

   `~source~node$V のみを包含する~list ◎ Otherwise, the list of dragged nodes contains only the source node, if any.

   `外部のもの$

   空~list ◎ ↑

5. %~drag対象 に応じて：

   選択

   次のようにされた`~item$を `~store$V の`~item~list$dSに追加する：

   • `型~文字列$dI ~SET `text/plain$l
   • `種類$dI ~SET `素の~Unicode文字列^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 •• Plain Unicode string • The actual data •• The text of the selection

   ~fileたち（`外部のもの$）

   次のようにされた`~item$を `~store$V の`~item~list$dSに追加する：

   • `型~文字列$dI ~SET ~fileの~MIME型が既知ならば それ ／ ~ELSE_ `application/octet-stream$l
   • `種類$dI ~SET `File^i
   • `実data$dI ~SET ~fileの内容と名前

   ◎ Otherwise, if any files are being dragged, then 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されるのは、現在の`閲覧文脈$の外側から — 例えば ~file~system~~管理~appから — に限られる。 ◎ Dragging files can currently only happen from outside a browsing context, for example from a file system manager application.

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

   • ~platform規約を適切に尊守する下で、~dragされている~dataに適切な`~item$を， `~store$V の`~item~list$dSに追加する。
   • ~platform規約が［ ~dragされた~dataの型として`~MIME型$を利用していない ］場合、その型から~MIME型へ対応付けるよう極力努める。
   • いずれにせよ、`~item$の`型~文字列$dIは，`~ASCII小文字~化$され~MUST。

   ◎ 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として — いくつかの`~item$を追加してもよい。 ◎ User agents may also add one or more items representing the selection or dragged element(s) in other forms, e.g. as HTML.

6. ~IF［ `被~drag~node~list$V は空でない ］：

   1. %~JSON文字列 ~LET ~list内の~nodeから ~microdataを抽出して~JSON形に した結果

   2. 次のようにされた`~item$を `~store$V の`~item~list$dSに追加する：

      • `型~文字列$dI ~SET `application/microdata+json$l
      • `種類$dI ~SET `素の~Unicode文字列^i
      • `実data$dI ~SET %~JSON文字列
   ◎ If the list of dragged nodes is not empty, then extract the microdata from those nodes into a JSON form, 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 •• Plain Unicode string • The actual data •• The text of the selection

7. `(A)^i： ◎ Run the following substeps:

   1. %~url~list ~LET 空~list ◎ Let urls be an empty list of absolute URLs.

   2. `被~drag~node~list$V 内の ~EACH( %~node ) に対し： ◎ For each node in the list of dragged nodes:

      1. ~IF［ %~node は `href$a 内容~属性を有する `a$e 要素である ］ ⇒ その属性の値を %~url~list に追加する ◎ If the node is an a element with an href attribute • Add to urls the result of parsing the element's href content attribute relative to the element's node document.
      2. ~ELIF［ %~node は `src$a 内容~属性を有する `img$e 要素である ］ ⇒ その属性の値を %~url~list に追加する ◎ If the node is an img element with a src attribute • Add to urls the result of parsing the element's src content attribute relative to the element's node document.
   3. ~IF［ %~url~list は空である ］ ⇒ ~BREAK `(A)^i ◎ If urls is still empty, then return.
   4. %~url~list 内の各~文字列を［ 要素の`~node文書$に`相対的に構文解析-$した`結果の~URL文字列$ ］に置換する ◎ ↑
   5. %~url文字列 ~LET %~url~list 内の各~文字列を CRLF （ U+000D, U+000A 並び） で区切って連結した結果 ◎ 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).

   6. 次のようにされた`~item$を `~store$V の`~item~list$dSに追加する：

      • `型~文字列$dI ~SET `text/uri-list$l
      • `種類$dI ~SET `素の~Unicode文字列^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 •• Plain Unicode string • The actual data •• url string

8. `~store$V の`既定の~feedback$dSを，適切に更新する — %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).
9. %~event ~LET `~DND~eventを発火する$( `~source~node$V, `dragstart$et ) ◎ Fire a DND event named dragstart at the source node.

10. ~IF［ %~event は`取消され$た ］ ⇒ ~RET — ~DnD演算は生じるべきでない ◎ 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.

11. ~platform規約に整合する方式で，下に述べるように`~DnD演算が起動され$る： ◎ Initiate the drag-and-drop operation in a manner consistent with platform conventions, and as described below.

    ~DnD~feedbackは、［ `~store$V の`~bitmap$dSが可用ならば それ ／ ~ELSE_ `~store$V の`既定の~feedback$dS ］から生成され~MUST ⇒ 前者の場合、 `~store$V の`~hot-spot座標$dSも，結果の画像の中で~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演算が起動され@ た時点から それが終わるまでの間は： ◎ 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）は、抑止し~MUST。 ◎ device input events (e.g. mouse and keyboard events) must be suppressed.

• 次のものを保持する — これらは、以下に与える手続きに述べるように，~UAにより更新される： ◎ ↓

  `現在の標的~要素@

  ~DnD演算の~drop先として，現在~選択されている要素。 初期~時は ~NULL。 ◎ ↓

  `直の利用者~選択@

  ~drag演算の間に，利用者により直に~drop標的として指示されている要素 【初期~時は~NULL。】 （利用者により選択され得るのは要素のみであり、他の~nodeが~drop標的として可用にされては~MUST_NOT）。 しかしながら，`直の利用者~選択$は、`現在の標的~要素$になるとは限らない。 ◎ 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による結果に基づいて，`現在の標的~要素$も変化する。 ◎ 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.

  `現在の標的~要素$, `直の利用者~選択$ の両者とも，途中で ~NULL になり得る — その場合、どの標的~要素も選択されていないことを意味する。 また、いずれも［ 同じ~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演算@

  とり得る値は、次のいずれか： `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.

`~drag演算の継続~手続き@ は、次を走らす： ◎ ↑

1. %直の選択 ~LET 利用者が現在~drop標的として指示しているもの（何もなければ ~NULL ） ◎ ↓
2. ~IF［ %直の選択 は、前回までの`直の利用者~選択$から変化していない ］ ⇒ ~RET ◎ ↓
3. `直の利用者~選択$ ~SET %直の選択 ◎ ↓
4. %前-標的 ~SET `現在の標的~要素$ ◎ ↓
5. ~IF［ %直の選択 ~EQ %前-標的 ］ ⇒ ~RET ◎ ↓
6. ~IF［ %前-標的 は~DOM要素である ］ ⇒ `~DND~eventを発火する$( %前-標的, `dragexit$et ) ◎ 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 fire a DND event named dragexit at the current target element, and then update the current target element as follows:

7. `現在の標的~要素$ ~SET 次の下位手続きを走らせた結果： ◎ ↑

   1. ~IF［ %直の選択 は~DOM要素でない ］ ⇒ ~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［ 次のいずれも満たされる ］…：

      • %直の選択 は`~text編集域$である
      • `~store$V の`~item~list$dS内に［ `型~文字列$dI ~EQ `text/plain$l ］~AND［ `種類$dI ~EQ `素の~Unicode文字列^i ］なる`~item$がある

      …ならば ⇒ ~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 Plain Unicode string • Set the current target element to the immediate user selection anyway.
   5. %文書 ~LET %直の選択 が属する `Document$I ~obj ◎ ↓
   6. %body ~LET %文書 の`~body要素$ ◎ ↓
   7. ~IF［ %直の選択 ~EQ %body ］ ⇒ ~RET %前-標的 ◎ 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
8. %現-標的 ~SET `現在の標的~要素$ ◎ ↓
9. ~IF［ %前-標的 は~DOM要素である ］~AND［ %現-標的 ~NEQ %前-標的 ］ ⇒ `~DND~eventを発火する$( %前-標的, `dragleave$et, %現-標的 ) ◎ 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.

10. ~IF［ %現-標的 は~DOM要素である ］： ◎ If the current target element is a DOM element, then＼

    1. %~event ~LET `~DND~eventを発火する$( %現-標的, `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［ %現-標的 は`~text編集域$である ］~AND［ `~store$V の`~item~list$dS内に［ `型~文字列$dI ~EQ `text/plain$l ］~AND［ `種類$dI ~EQ `素の~Unicode文字列^i ］なる`~item$がある ］ ⇒ `現在の~drag演算$ ~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 Plain Unicode string • Set the current drag operation to either "copy" or "move", as appropriate given the platform conventions.
       2. ~ELSE ⇒ `現在の~drag演算$ ~SET `none$op ◎ Otherwise • Reset the current drag operation to "none".

    3. ~ELSE（ %~event は`取消され$た） ⇒ `現在の~drag演算$ ~SET %~event の `dataTransfer$m 属性~値の ( `effectAllowed$m, `dropEffect$m ) 属性~値に応じて，次の表の 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演算
       `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
       その他の場合 ◎ Any other case		`none$op

11. ~ELSE（ %現-標的 は~DOM要素でない） ⇒ `現在の~drag演算$ ~SET ~platform特有な仕組みを利用して，どの~drag演算を遂行するかを決定した結果（ `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.

12. 次に従って、`現在の~drag演算$に合致するように ~drag~feedback（例： ~mouse~cursor）を更新する： ◎ Update the drag feedback (e.g. the mouse cursor) to match the current drag operation, as follows:

    ~drag演算 ◎ 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	許容される演算はない。 ここに~dropされたときには，~DnD演算は取消される。 ◎ No operation allowed, dropping here will cancel the drag-and-drop operation.

`~drag演算の最終回~手続き@ は、次を走らす： ◎ 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. %現-標的 ~SET `現在の標的~要素$ ◎ ↓

2. %~dropされた ~LET ［ 次のいずれかが満たされる（~drag演算は失敗した）ならば ~F ／ ~ELSE_ ~T ］

   • `現在の~drag演算$ ~EQ `none$op
   • 利用者が~DnD演算を取消して終わらせた（例： Escape ~keyを叩いたなど）
   • %現-標的 ~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［ %現-標的 は~DOM要素である ］ ⇒ `~DND~eventを発火する$( %現-標的, `dragleave$et ) ◎ If the current target element is a DOM element, fire a DND event named dragleave at it;＼
   2. ~ELIF［ %現-標的 ~NEQ ~NULL ］ ⇒ ~drag取消n用の~platform特有な規約を利用する ◎ otherwise, if it is not null, use platform-specific conventions for drag cancelation.
   3. `現在の~drag演算$ ~SET `none$op ◎ Set the current drag operation to "none".

4. ~ELSE（~drag演算はおよそ成功した）： ◎ Otherwise, the drag operation might be a success; run these substeps: ◎ Let dropped be true.

   1. ~IF［ %現-標的 は ~DOM要素でない ］ ⇒ ~platform特有な規約を利用して，~dropを指示する ◎ ↓

   2. ~ELSE ◎ If the current target element is a DOM element,＼

      1. %~event ~LET `~DND~eventを発火する$( %現-標的, `drop$et ) ◎ fire a DND event named drop at it; otherwise, use platform-specific conventions for indicating a drop.
      2. ~IF［ %~event は`取消され$た ］ ⇒ `現在の~drag演算$ ~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［ 次のいずれも満たされる ］： ◎ Otherwise, the event is not canceled; perform the event's default action, which depends on the exact target as follows:

         • %現-標的 は`~text編集域$である
         • `~store$V の`~item~list$dS内に［ `型~文字列$dI ~EQ `text/plain$l ］~AND［ `種類$dI ~EQ `素の~Unicode文字列^i ］なる`~item$がある

         ◎ 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 Plain Unicode string

         …ならば（ %~event の既定~動作を遂行する） ⇒ ［ そのような`~item$のうち，`~store$V の`~item~list$dS内で最初のもの ］の`実data$dIを，~platform特有な規約に整合する方式で， %現-標的 の中に挿入する （例： 現在の~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 Plain Unicode string 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演算$ ~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［ 次のいずれも満たされる ］…

      • %~dropされた ~EQ ~T
      • `現在の~drag演算$ ~EQ `move$op
      • %現-標的 は~text~controlである（下を見よ）

      …ならば：

      1. ~IF［ ~DnD演算の~sourceは，ある`編集中の~host$の中に全体が包含されているような，~DOM内の選択である ］ ⇒ `選択を削除-$する
      2. ~ELIF［ ~DnD演算の~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演算$ ~EQ `none$op ］ ⇒ ~dragは取消された — ~platform規約にて，取消されたことを利用者に向けて表現する（例： ~dragされた選択を，~DnD演算の~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.

   この段の目的においては、次に該当するものが~text~controlであるとされる ⇒ `textarea$e 要素 ／［ `input$e 要素のうち，その `type$a 属性の状態 ~IN { `Text$st, `Search$st, `Tel$st, `Url$st, `E-mail$st, `Password$st, `Number$st } ］なるもの ］ ◎ 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, E-mail, Password, or Number states.

注記： ~UAには、~scroll可能な領域の辺に近い~dragに対し，どう反応するか考慮することが奨励される。 例えば、利用者がある~drag対象を長い頁の`表示域$の下端~近くに~dragした場合、頁を~scrollして，利用者がその対象を頁の~~下方へ~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を孕んでいる `Document$I ~objからは，独立である — 演算に孕まれている文書の個数に~~関係なく、上述したとおりに，~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.7.6. ~event要覧

~DnD~modelに孕まれる~eventを次の一覧に要約する： ◎ The following events are involved in the drag-and-drop model.

6.7.7. `draggable^a 属性

`draggable$a 内容~属性は、すべての`~HTML要素$に設定できる。 この属性は`列挙~属性$であり、次の~keyword, および対応する状態をとり得る： ◎ All HTML elements may have the draggable content attribute set. The draggable attribute is an enumerated attribute. It has three states.＼

`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可能になるかどうかを制御する。 その値は、下に述べるように要素の `draggable$a 内容~属性に依存する。 ~drag可能になるものは，一般には~text選択に限られるが、この~IDL属性が ~T に設定された要素も~drag可能になる。 ◎ The draggable IDL attribute, 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.

取得子は、此れの `draggable$a 内容~属性の状態に応じて，次に与える値を返さ~MUST： ◎ ↓

• `~T^st ⇒ ~T ◎ If an element's draggable content attribute has the state true, the draggable IDL attribute must return true.
• `~F^st ⇒ ~F ◎ Otherwise, if the element's draggable content attribute has the state false, the draggable IDL attribute must return false.
• `自動^st ⇒ ［ 此れは次のいずれかに該当するならば ~T ／ ~ELSE_ ~F ］ ⇒＃ `img$e 要素である ／ 画像を`表現-$する `object$e 要素である ／ `href$a 内容~属性を有する `a$e 要素である ◎ 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 ］に設定し~MUST ◎ 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.7.8. ~DnD~modelにおける保安~risk

~UAは、 `drop$et ~eventを配送するまで，［ `dragstart$et ~eventの間に `DataTransfer$I ~objに追加された~data ］を~scriptから可用にしては~MUST_NOT — さもなければ、利用者がある文書から別の文書へ~sensitive情報を~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演算を終わらせた場合に限り，~dropは成功したと見なすことが要求される。 — ~scriptが終わらせたどの~drag演算も，成功しなかった（取消された）ものと見なした上で、 `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演算が，~script動作に呼応して開始されないように~~注意を払うべきである。 例えば、~mouseと~windowを備える環境の下で，利用者が~mouse~button押下げている間に ~scriptが~windowを移動させた場合、~UAはそれを~dragの開始と見なさないようにすることが重要になる。 さもなければ、利用者の同意なしに，~sensitive~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）をふるいにかけるべきである。 同様に，`相対~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.

敵対的な頁が、ある内容を供していて，利用者にその内容を選択させた上で 被害~頁の `contenteditable$a 領域へ ~DnDさせる（または ~~実際に~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.