DataTransfer

DataTransfer オブジェクトは、ドラッグ&ドロップ操作の実行中、ドラッグされているデータを保持するために使われます。データトランスファーは 1 つ以上の項目を保持し、それぞれの項目は 1 つ以上のデータ型を保持します。ドラッグ&ドロップについての詳しい情報はドラッグ&ドロップを参照してください。

このオブジェクトはすべての ドラッグイベントdataTransfer プロパティからアクセスすることができます。

コンストラクタ

DataTransfer()
新規DataTransfer オブジェクトを作成して返す。

プロパティ一覧

標準プロパティ

DataTransfer.dropEffect
現在選択されているドラッグ&ドロップ操作の種類を取得したり、新しい操作の種類をセットしたりします。値は nonecopylink, move のいずれかです。
DataTransfer.effectAllowed
とりうるすべての操作の種類を与えます。none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized のいずれかです。
DataTransfer.files
データトランスファーが保持していて利用可能なすべてのローカルファイルのリストを保持します。ドラッグ操作がファイルのドラッグによるものではない場合、このプロパティは空のリストになります。
DataTransfer.items 読取専用
Gives a DataTransferItemList object which is a list of all of the drag data.
DataTransfer.types 読取専用
dragstart イベントでセットされたフォーマットを示すstringsの配列。

Gecko プロパティ

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

注: この節の全プロパティは Gecko-固有のものです。
DataTransfer.mozCursor
Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.
DataTransfer.mozSourceNode 読取専用
ドラッグ操作を開始するためにボタンを押下したときにマウスカーソルのあったNodeを返します。外部アプリケーションからのドラッグの場合や、ドラッグを開始したノードが呼び出し元からアクセスできない物であった場合は、値は null となります。
DataTransfer.mozUserCancelled 読取専用
このプロパティは dragend イベントに対してのみ適用され、ユーザーが Esc キーを押下してドラッグ操作を取り消した場合は値が true となります。不正な場所でドロップした場合など、その他の理由でドラッグ操作に失敗した場合には、値は false となります。

Deprecated プロパティ

DataTransfer.mozItemCount 読取専用
ドラッグされている項目の個数を返します。Firefox 71 で削除されます。

メソッド

標準メソッド

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

Gecko メソッド

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

注: この節の全メソッドは Gecko-固有のものです。
DataTransfer.addElement()
ドラッグ元の要素を指定します。

Deprecated メソッド

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

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

仕様

仕様書 策定状況 コメント
HTML Living Standard
DataTransfer の定義
現行の標準 mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
HTML 5.1
DataTransfer の定義
勧告 Not included in W3C HTML5 勧告

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DataTransferChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.
IE 完全対応 10Opera 完全対応 12Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
DataTransfer() constructorChrome 完全対応 60Edge ? Firefox ? IE ? Opera 完全対応 47Safari ? WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android ? Opera Android 完全対応 44Safari iOS 未対応 なしSamsung Internet Android ?
addElement
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
clearDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
dropEffectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
effectAllowedChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
filesChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
getDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
itemsChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 50IE 未対応 なしOpera 完全対応 12Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
mozClearDataAt
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 71IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozCursor
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozGetDataAt
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 71IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozItemCount
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 71IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozSetDataAt
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 71IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozSourceNode
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozTypesAt
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 71IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozUserCancelled
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
setDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
setDragImageChrome 完全対応 ありEdge 完全対応 18Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
typesChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報