DataTransfer - 転送データ
DataTransferは、ドラッグ操作やクリップボード操作によって転送されるデータを管理するための機能を備えたインターフェイスです。
概要
- 名前
- DataTransfer
- IDL
[Exposed=Window, Constructor] interface DataTransfer { attribute DOMString dropEffect; attribute DOMString effectAllowed; [SameObject] readonly attribute DataTransferItemList items; void setDragImage(Element image, long x, long y); /* old interface */ readonly attribute FrozenArray<DOMString> types; DOMString getData(DOMString format); void setData(DOMString format, DOMString data); void clearData(optional DOMString format); [SameObject] readonly attribute FileList files; };
- 仕様書
- https://html.spec.whatwg.org/multipage/dnd.html#datatransfer
チュートリアル
DataTransferは、例えばドラッグ関連のイベントや、クリップボード関連のイベントで渡されるオブジェクトに含まれています。
var callbackFn = function ( event ) {
console.log( event.dataTransfer ) ; // DataTransfer
}
element.ondragstart = callbackFn ;
var callbackFn = function ( event ) {
console.log( event.clipboardData ) ; // DataTransfer
}
element.oncopy = callbackFn ;
コンストラクタ
DataTransfer()
新しいDataTransferのオブジェクトを作成します。
プロパティ
dropEffect
転送データを取り扱う時の、ドロップ側の操作を返します。
effectAllowed
転送データを取り扱う時の、ドラッグ側の操作を返します。
files
転送中のファイルの一覧をFileListで返します。
items
転送中のデータの一覧をDataTransferItemListで返します。
types
転送中のデータの種類の一覧を配列で返します。
メソッド
clearData()
転送中のデータを削除します。
getData()
転送中のデータの内容を取得します。
setData()
転送中のデータの内容を変更します。
setDragImage()
ドラッグ操作中に表示するイメージを設定します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
DataTransfer | ● | ● | 確認中 | ● | ● 8+ | ● 12+ | 確認中 | 確認中 |
clearData() | ● | ● | ● | ● | ● 8+ | ● 12+ | ● | ● 4.4+ |
DataTransfer() | ● 59+ | × | × | × | × | ● 46+ | × | × |
dropEffect | ● | ● | ● | ● | ● 9+ | ● 12+ | ● | ● 4.4+ |
effectAllowed | ● | ● | ● | ● | ● 9+ | ● 12+ | ● | ● 4.4+ |
files | ● | ● | ● | ● | ● 10+ | ● 12+ | ● | ● 4.4+ |
getData() | ● | ● | ● | ● | ● 8+ | ● 12+ | ● | ● 4.4+ |
items | ● | ● 50+ | × | ● | × | ● 12+ | × | ● 4.4+ |
setData() | ● | ● | ● | ● | ● 8+ | ● 12+ | ● | ● 4.4+ |
setDragImage() | ● | ● | ● | × | × | ● 12+ | ● | ● 4.4+ |
types | ● | ● | ● 10+ | ● | ● 10+ | ● 12+ | ● 10.0+ | ● 4.4+ |
関連記事
- DataTransfer.dropEffect
- dropEffectは、DataTransferのプロパティです。転送データを取り扱う時の、ドロップ側の操作を返します。dragoverイベント、またはdragenterイベントにおいて、値を代入して設定することができます。ドラッグされる要素(effectAllowed)の値と、それを受け取る要素(dropEffect)の値が噛み合わない時、ドロップが発生しません。
- ClipboardEvent.clipboardData
- clipboardDataは、ClipboardEventのプロパティです。クリップボードにあるデータを表すDataTransferを返します。
- DataTransfer()
- DataTransfer()は、DataTransferのコンストラクタです。新しいオブジェクトを作成します。
- FormData
- FormDataは、フォームの内容を管理するための機能を備えたインターフェイスです。