SYNCERのロゴ
アイキャッチ画像

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 ;

プロパティ

dropEffect

転送データを取り扱う時の、ドロップ側の操作を返します。

effectAllowed

転送データを取り扱う時の、ドラッグ側の操作を返します。

files

転送中のファイルの一覧をFileListで返します。

items

転送中のデータの一覧をDataTransferItemListで返します。

types

転送中のデータの種類の一覧を配列で返します。

メソッド

clearData()

転送中のデータを削除します。

getData()

転送中のデータの内容を取得します。

setData()

転送中のデータの内容を変更します。

setDragImage()

ドラッグ操作中に表示するイメージを設定します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
DataTransfer 8+ 12+ 4.4+
clearData() 8+ 12+ 4.4+
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+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月10日 (火)
コンテンツを公開しました。