JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のDataTransferオブジェクトとは？使い方とサンプルコードを解説

HTML5のDataTransferオブジェクトとは

HTML5のドラッグ＆ドロップAPIでは、すべてのドラッグ＆ドロップイベントのリスナーメソッドがEventオブジェクトを受け取ります。このEventオブジェクトには、読み取り専用の属性であるdataTransferが含まれています。

event.dataTransferにアクセスすることで、そのイベントに関連付けられたDataTransferオブジェクトを取得できます。記述方法は以下の通りです。

function EnterHandler(event) {
  const dt = event.dataTransfer;
  // dtを使ってドラッグ中のデータを操作できます
  ...
}

DataTransferオブジェクトの主なメンバー

  • setData(format, data)：指定した形式でドラッグするデータを設定します
  • getData(format)：指定した形式のデータを取得します
  • setDragImage(element, x, y)：ドラッグ中に表示される画像を設定します
  • effectAllowed：許可するドラッグ操作（move、copyなど）を指定します

実装サンプルコード

以下のコードを実行して、DataTransferオブジェクトの実際の動作を確認してみましょう。紫色のボックス（boxA）をドラッグし、ピンク色のボックス（boxB）へドロップするシンプルなデモです。

<!DOCTYPE HTML>
<html>
<head>
<style>
#boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>

<script>
function dragStart(ev) {
  ev.dataTransfer.effectAllowed = 'move';
  ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
  ev.dataTransfer.setDragImage(ev.target, 0, 0);
  return true;
}
</script>
</head>

<body>
<center>
<h2>ドラッグ＆ドロップHTML5デモ</h2>
<div>紫色のボックスをドラッグしてみましょう。</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
<p>ここをドラッグ</p>
</div>
<div id="boxB">ゴミ箱</div>
</center>
</body>
</html>

コードのポイント解説

このサンプルでは、ドラッグ開始時（dragstartイベント）にdragStart()関数が呼び出されます。関数内では次の処理を行っています。

  1. effectAllowedに'move'を設定し、移動操作のみを許可しています
  2. setData()メソッドで、ドラッグ対象要素のIDをテキストデータとして保存しています
  3. setDragImage()メソッドで、ドラッグ中に表示されるイメージを元の要素そのものに指定しています

なお、インラインのイベントハンドラから関数を呼び出す場合は、引数としてeventオブジェクトを渡す必要がある点に注意してください。これにより、ドラッグ操作に関する情報をDataTransferオブジェクト経由で自由に扱えるようになります。

  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars