---
title: DataTransfer
slug: Web/API/DataTransfer
tags:
  - API
  - DataTransfer
  - HTML Drag and Drop API
  - Interface
  - NeedsMarkupWork
  - Reference
  - Web Development
  - drag and drop
translation_of: Web/API/DataTransfer
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>

<p><strong><code>DataTransfer</code></strong> オブジェクトは、ドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用されます。これは、1 つ以上のデータ項目を保持することができ、それぞれが 1 つ以上のデータ型を持ちます。ドラッグ＆ドロップの詳細については、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ＆ドロップ API</a> を参照してください。</p>

<p>このオブジェクトはすべての {{domxref("DragEvent","ドラッグイベント")}} の {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティからアクセスすることができます。</p>

<h2 id="Constructor" name="Constructor">コンストラクタ</h2>

<dl>
 <dt>{{domxref("DataTransfer.DataTransfer","DataTransfer()")}}</dt>
 <dd>新規 <code>DataTransfer</code> オブジェクトを作成して返す。</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ一覧</h2>

<h3 id="Standard_properties" name="Standard_properties">標準プロパティ</h3>

<dl>
 <dt>{{domxref("DataTransfer.dropEffect")}}</dt>
 <dd>現在選択されているドラッグ&amp;ドロップ操作の種類を取得したり、新しい操作の種類をセットしたりします。値は <code>none</code>, <code>copy</code>, <code>link</code>, <code>move</code> のいずれかです。</dd>
 <dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
 <dd>とりうるすべての操作の種類を与えます。<code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code>, <code>uninitialized</code> のいずれかです。</dd>
</dl>

<dl>
 <dt>{{domxref("DataTransfer.files")}}</dt>
 <dd>データトランスファーが保持していて利用可能なすべてのローカルファイルのリストを保持します。ドラッグ操作がファイルのドラッグによるものではない場合、このプロパティは空のリストになります。</dd>
 <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
 <dd> 全てのドラッグデータのリストである {{domxref("DataTransferItemList")}} オブジェクトを返します。.</dd>
 <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
 <dd>{{event("dragstart")}} イベントでセットされたフォーマットを示す{{domxref("DOMString","strings")}}の配列。</dd>
</dl>

<h3 id="Gecko_properties" name="Gecko_properties">Gecko プロパティ</h3>

<p>{{SeeCompatTable}}</p>

<div class="note"><strong>注:</strong> この節の全プロパティは Gecko-固有のものです。</div>

<dl>
 <dt>{{domxref("DataTransfer.mozCursor")}}</dt>
 <dd>ドラッグカーソルの状態を返します。主にタブドラッグの際のカーソルを制御するのに使います。</dd>
 <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
 <dd>ドラッグ操作を開始するためにボタンを押下したときにマウスカーソルのあった{{ domxref("Node") }}を返します。外部アプリケーションからのドラッグの場合や、ドラッグを開始したノードが呼び出し元からアクセスできない物であった場合は、値は <code>null</code> となります。</dd>
 <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
 <dd>このプロパティは <code>dragend</code> イベントに対してのみ適用され、ユーザーが Esc キーを押下してドラッグ操作を取り消した場合は値が <code>true</code> となります。不正な場所でドロップした場合など、その他の理由でドラッグ操作に失敗した場合には、値は <code>false</code> となります。</dd>
</dl>

<h3 id="Deprecated_properties" name="Deprecated_properties">Deprecated プロパティ</h3>

<dl>
 <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}} {{deprecated_inline}}</dt>
 <dd>ドラッグされている項目の個数を返します。Firefox 71 で削除されます。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<h3 id="Standard_methods" name="Standard_methods">標準メソッド</h3>

<dl>
 <dt>{{domxref("DataTransfer.clearData()")}}</dt>
 <dd>指定された型のデータを削除します。型の指定は省略可能です。型として空の文字列を指定した場合、もしくは型を指定しなかった場合、すべての型のデータが削除されます。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを持っていない場合、このメソッドは何もしません。</dd>
 <dt>{{domxref("DataTransfer.getData()")}}</dt>
 <dd>指定された型のデータを取得します。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを保持していない場合、空文字を返します。</dd>
 <dt>{{domxref("DataTransfer.setData()")}}</dt>
 <dd>指定された型のデータを設定します。その型のデータが存在しない場合、データはリストの最後に追加されるため、データ型のリストの最後の項目は、最後に追加された新しいデータ型となります。その型のデータがすでに存在している場合、データ型のリストにおける元と同じ位置で、古いデータが新しいデータと置き換わります。</dd>
 <dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
 <dd>ドラッグ中に表示されるフィードバックイメージについて、独自のものを使用したい場合に、それをセットします。</dd>
</dl>

<h3 id="Gecko_methods" name="Gecko_methods">Gecko メソッド</h3>

<p>{{Non-standard_header()}}</p>

<div class="note"><strong>注:</strong> この節の全メソッドは Gecko-固有のものです。</div>

<dl>
 <dt>{{domxref("DataTransfer.addElement()")}}</dt>
 <dd>ドラッグ元の要素を指定します。</dd>
</dl>

<h3 id="Deprecated_methods" name="Deprecated_methods">Deprecated メソッド</h3>

<dl>
 <dt>{{domxref("DataTransfer.mozClearDataAt()")}} {{deprecated_inline}}</dt>
 <dd>指定されたインデックスの項目について、指定された形式に関連付けられたデータを削除します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。</dd>
 <dt>{{domxref("DataTransfer.mozGetDataAt()")}} {{deprecated_inline}}</dt>
 <dd>指定されたインデックスの項目の、指定された形式のデータを取得します。存在しない項目またはデータ形式を指定した場合は null を返します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。</dd>
 <dt>{{domxref("DataTransfer.mozSetDataAt()")}} {{deprecated_inline}}</dt>
 <dd>データトランスファーは複数の項目を保持する事ができ、それぞれの項目には 0 から始まるインデックスが付けられます。<code>mozSetDataAt()</code> は、すでに存在する項目を変更する場合には <code>mozItemCount</code> より小さい値をインデックスとして指定し、新しい項目を追加する場合は <code>mozItemCount</code> に等しい値をインデックスとして指定します。また、<code>mozItemCount</code> は項目を追加する度に増加します。Firefox 71 で削除されます。</dd>
 <dt>{{domxref("DataTransfer.mozTypesAt()")}} {{deprecated_inline}}</dt>
 <dd>指定されたインデックスの項目が保持しているデータの形式のリスト（文字列の配列）を返します。0〜(項目の数-1）の範囲外のインデックスを指定した場合は、空のリストを返します。Firefox 71 で削除されます。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<p>この文書に載っているすべてのメソッドとプロパティは自分自身のリファレンスページを持ち、そのページに直接例が載っているか、例へのリンクがあるかのいずれかです。</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>



<p>{{Compat("api.DataTransfer")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">Drag and drop</a></li>
 <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations">Drag Operations</a></li>
 <li><a href="/ja/docs/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li>
 <li><a href="/ja/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
 <li><a href="https://codepen.io/tech_query/pen/MqGgap">DataTransfer test - Paste or Drag</a></li>
</ul>