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 ;

コンストラクタ

DataTransfer()

新しいDataTransferのオブジェクトを作成します。

プロパティ

dropEffect

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

effectAllowed

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

files

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

items

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

types

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

メソッド

clearData()

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

getData()

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

setData()

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

setDragImage()

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

定数

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

イベント

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

サポート状況

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

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