| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3KHnk9KVzycMZrtSLAWvP7WCmPXaKN52jKrqupW2jqnWBTG4SRCHqUOznkb8ossIacQ
cache-control: public, max-age=3600
expires: Fri, 10 Oct 2025 19:48:35 GMT
last-modified: Fri, 10 Oct 2025 01:10:47 GMT
etag: W/"06c0a3f8df85f50f0014d651e4f5fb17"
x-goog-generation: 1760058647505064
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 156134
x-goog-meta-goog-reserved-file-mtime: 1760056908
x-goog-hash: crc32c=vMDJrw==, md5=BsCj+N+F9Q8AFNZR5PX7Fw==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 3ace8cfbd5bd0462f621202d12226e02
date: Fri, 10 Oct 2025 18:48:36 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
DataTransfer.types - Web API | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransfer.types
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
DataTransfer.types は読み取り専用プロパティで、 dragstart イベントで設定されたドラッグデータ形式の（文字列の）配列を返します。形式の順序は、ドラッグ操作に含まれるデータの順序と同じです。
形式は、データの型や形式を示す Unicode 文字列で、一般的には MIME タイプで指定されます。 MIME タイプでないいくつかの値も、レガシーな理由から特殊なケースに入れられます（たとえば "text" など）。
値
ドラッグ操作で使用されるデータ形式の配列。各形式は文字列です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 Files になります。
例
この例では、types と items プロパティを使用しています。
js
<!DOCTYPE html>
<html lang=en>
<title>DataTransfer.{types,items} プロパティの例</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart: target.id = " + ev.target.id);
// ドラッグ内容にこの要素の ID を追加し、ドロップハンドラーがどの要素を
// ツリーに追加すればよいかを知ることができるようにします。
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: target.id = " + ev.target.id);
ev.preventDefault();
// ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// それぞれの形式を表示する
if (ev.dataTransfer.types != null) {
for (let i=0; i < ev.dataTransfer.types.length; i++) {
console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
}
}
// それぞれの項目の "kind" と "type" を表示する
if (ev.dataTransfer.items != null) {
for (let i=0; i < ev.dataTransfer.items.length; i++) {
console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
}
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// dropEffect を move に設定する
ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
<ul>
<li id="i1" ondragstart="dragstart_handler(event);" draggable="true">項目 1 をドロップゾーンへドラッグしてください</li>
<li id="i2" ondragstart="dragstart_handler(event);" draggable="true">項目 2 をドロップゾーンへドラッグしてください</li>
</ul>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>
仕様書
| Specification |
|---|
| HTML # dom-datatransfer-types-dev |
ブラウザーの互換性
Loading…