From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/datatransferitemlist/clear/index.html | 151 +++++++++++++++++++++ files/ja/web/api/datatransferitemlist/index.html | 78 +++++++++++ .../web/api/datatransferitemlist/length/index.html | 148 ++++++++++++++++++++ 3 files changed, 377 insertions(+) create mode 100644 files/ja/web/api/datatransferitemlist/clear/index.html create mode 100644 files/ja/web/api/datatransferitemlist/index.html create mode 100644 files/ja/web/api/datatransferitemlist/length/index.html (limited to 'files/ja/web/api/datatransferitemlist') diff --git a/files/ja/web/api/datatransferitemlist/clear/index.html b/files/ja/web/api/datatransferitemlist/clear/index.html new file mode 100644 index 0000000000..c06230c89c --- /dev/null +++ b/files/ja/web/api/datatransferitemlist/clear/index.html @@ -0,0 +1,151 @@ +--- +title: DataTransferItemList.clear() +slug: Web/API/DataTransferItemList/clear +tags: + - API + - DataTransferItemList + - HTML DOM + - HTML Drag and Drop API + - Method + - Reference + - clear + - ドラッグアンドドロップ +translation_of: Web/API/DataTransferItemList/clear +--- +

{{domxref("DataTransferItemList")}} の clear() メソッドは、ドラッグデータアイテムリストからすべての {{domxref("DataTransferItem")}} オブジェクトを削除し、リストを空にします。

+ +

このリストが保持されるドラッグデータストアは、 {{event("dragstart")}} イベントの処理中にのみ書き込み可能になります。 {{event("drop")}} を処理する間、ドラッグデータストアは読み取り専用モードであり、このメソッドは何もしません。例外も投げません。

+ +

構文

+ +
DataTransferItemList.clear();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

{{jsxref("undefined")}}

+ +

+ +

この例は clear() メソッドの使い方を示します。

+ +

HTML

+ +
 <div>
+   <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+ +

CSS

+ +
  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+ +

JavaScript

+ +
function dragstart_handler(ev) {
+  console.log("dragStart");
+  // Add this element's id to the drag payload so the drop handler will
+  // know which element to add to its tree
+  var dataList = ev.dataTransfer.items;
+  dataList.add(ev.target.id, "text/plain");
+  // Add some other items to the drag payload
+  dataList.add("<p>... paragraph ...</p>", "text/html");
+  dataList.add("http://www.example.org","text/uri-list");
+}
+
+function drop_handler(ev) {
+  console.log("Drop");
+  ev.preventDefault();
+  var data = event.dataTransfer.items;
+  // Loop through the dropped items and log their data
+  for (var i = 0; i < data.length; i++) {
+    if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
+      // This item is the target node
+      data[i].getAsString(function (s){
+        ev.target.appendChild(document.getElementById(s));
+      });
+    } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) {
+      // Drag data item is HTML
+      data[i].getAsString(function (s){
+        console.log("... Drop: HTML = " + s);
+      });
+    } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) {
+      // Drag data item is URI
+      data[i].getAsString(function (s){
+        console.log("... Drop: URI = " + s);
+      });
+    }
+  }
+}
+
+function dragover_handler(ev) {
+  console.log("dragOver");
+  ev.preventDefault();
+  // Set the dropEffect to move
+  ev.dataTransfer.dropEffect = "move"
+}
+
+function dragend_handler(ev) {
+  console.log("dragEnd");
+  var dataList = ev.dataTransfer.items;
+  for (var i = 0; i < dataList.length; i++) {
+    dataList.remove(i);
+  }
+  // Clear any remaining drag data
+  dataList.clear();
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', 400, 300)}}

+ +

{{LiveSampleLink('Example','Result link')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitemlist-clear','clear()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitemlist-clear','clear()')}}{{Spec2('HTML5.1')}}W3C HTML5 {{Spec2('HTML5 W3C')}} には含まれていない
+ +

ブラウザーの対応

+ + + +

{{Compat("api.DataTransferItemList.clear")}}

+ +
{{APIRef("HTML Drag and Drop API")}}
diff --git a/files/ja/web/api/datatransferitemlist/index.html b/files/ja/web/api/datatransferitemlist/index.html new file mode 100644 index 0000000000..584201eb0c --- /dev/null +++ b/files/ja/web/api/datatransferitemlist/index.html @@ -0,0 +1,78 @@ +--- +title: DataTransferItemList +slug: Web/API/DataTransferItemList +tags: + - API + - DataTransferItemList + - HTML DOM + - HTML Drag and Drop API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - drag and drop +translation_of: Web/API/DataTransferItemList +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

The DataTransferItemList object is a list of {{domxref("DataTransferItem")}} objects representing items being dragged. During a drag operation, each {{domxref("DragEvent")}} has a {{domxref("DragEvent.dataTransfer","dataTransfer")}} property and that property is a DataTransferItemList.

+ +

This interface has no constructor.

+ +

Properties

+ +
+
{{domxref("DataTransferItemList.length")}} {{readonlyInline}}
+
An unsigned long that is the number of drag items in the list.
+
+ +

Methods

+ +
+
{{domxref("DataTransferItemList.add()")}}
+
Adds an item (either a {{domxref("File")}} object or a {{domxref("DOMString","string")}}) to the drag item list and returns a {{domxref("DataTransferItem")}} object for the new item.
+
{{domxref("DataTransferItemList.remove()")}}
+
Removes the drag item from the list at the given index.
+
{{domxref("DataTransferItemList.clear()")}}
+
Removes all of the drag items from the list.
+
{{domxref("DataTransferItemList.DataTransferItem()")}}
+
Getter that returns a {{domxref("DataTransferItem")}} at the given index.
+
+ +

Example

+ +

Each of this interface's methods and properties has a reference page, and each reference page has an example of its usage.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#datatransferitemlist','DataTransferItemList')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#datatransferitemlist','DataTransferItemList')}}{{Spec2('HTML5.1')}}Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("api.DataTransferItemList")}}

+ +

 

diff --git a/files/ja/web/api/datatransferitemlist/length/index.html b/files/ja/web/api/datatransferitemlist/length/index.html new file mode 100644 index 0000000000..90a6b18a13 --- /dev/null +++ b/files/ja/web/api/datatransferitemlist/length/index.html @@ -0,0 +1,148 @@ +--- +title: DataTransferItemList.length +slug: Web/API/DataTransferItemList/length +tags: + - API + - DataTransferItemList + - HTML DOM + - HTML Drag and Drop API + - Property + - Reference + - length + - ドラッグアンドドロップ +translation_of: Web/API/DataTransferItemList/length +--- +

{{domxref("DataTransferItemList")}} インターフェイスの length プロパティは読み取り専用で、ドラッグアイテムリストの中に現在入っているアイテムの数を返します。

+ +

構文

+ +
length = DataTransferItemList.length;
+
+ +

返値

+ +

リスト中のドラッグデータアイテムの数で、もしリストが空か無効であれば 0 です。アイテムリストの {{domxref("DataTransfer")}} オブジェクトがドラッグデータストアに関連付けられていない場合は、ドラッグアイテムリストは無効とみなされます。

+ +

+ +

この例は length プロパティの使い方を示しています。

+ +

JavaScript

+ +
function dragstart_handler(ev) {
+  console.log("dragStart");
+  // Add this element's id to the drag payload so the drop handler will
+  // know which element to add to its tree
+  var dataList = ev.dataTransfer.items;
+  dataList.add(ev.target.id, "text/plain");
+  // Add some other items to the drag payload
+  dataList.add("<p>... paragraph ...</p>", "text/html");
+  dataList.add("http://www.example.org","text/uri-list");
+}
+
+function drop_handler(ev) {
+  console.log("Drop");
+  ev.preventDefault();
+  var data = ev.dataTransfer.items;
+  // Loop through the dropped items and log their data
+  for (var i = 0; i < data.length; i++) {
+    if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
+      // This item is the target node
+      data[i].getAsString(function (s){
+        ev.target.appendChild(document.getElementById(s));
+      });
+    } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) {
+      // Drag data item is HTML
+      data[i].getAsString(function (s){
+        console.log("... Drop: HTML = " + s);
+      });
+    } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) {
+      // Drag data item is URI
+      data[i].getAsString(function (s){
+        console.log("... Drop: URI = " + s);
+      });
+    }
+  }
+}
+
+function dragover_handler(ev) {
+  console.log("dragOver");
+  ev.preventDefault();
+  // Set the dropEffect to move
+  ev.dataTransfer.dropEffect = "move"
+}
+
+function dragend_handler(ev) {
+  console.log("dragEnd");
+  var dataList = ev.dataTransfer.items;
+  // Clear any remaining drag data
+  dataList.clear();
+}
+
+
+ +

HTML

+ +
<div>
+  <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+
+ +

CSS

+ +
div {
+  margin: 0em;
+  padding: 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example_Drag_and_Drop')}}

+ +

{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitemlist-length','length')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitemlist-length','length')}}{{Spec2('HTML5.1')}}W3C HTML5 {{Spec2('HTML5 W3C')}} には含まれていない
+ +

ブラウザーの対応

+ + + +

{{Compat("api.DataTransferItemList.length")}}

+ +
{{APIRef("HTML Drag and Drop API")}}
-- cgit v1.2.3-54-g00ecf