Drop Event Tester 解説書

ブラウザが受け取るドラッグ＆ドロップイベントのリアルタイム解析

1. ツールの目的

本ツールは、ブラウザがドラッグ＆ドロップ操作中に内部でどのようなデータをやり取りしているかをリアルタイムで解析・表示するデバッグツールです。 Web アプリケーション開発におけるドラッグ＆ドロップ機能の実装や、ブラウザによるデータの正規化挙動の調査に役立ちます。

2. 動作原理

JavaScript のドラッグ＆ドロップ API（Drag and Drop API）イベントを購読し、以下のプロセスで情報を可視化します。

  • イベントの可視化: dragenter, dragover, dragleave, drop の各フェーズをログに記録します。
  • 座標の追跡: ドラッグ中のマウス座標（clientX, clientY）を表示します。
  • デフォルト動作の制御: event.preventDefault() を使用してブラウザのデフォルト挙動（ファイルを開く、画像を遷移するなど）をキャンセルし、安全にデータを検査できます。

3. DataTransfer オブジェクトの解析

ドロップ時に渡される DataTransfer オブジェクトに含まれる多角的な情報を抽出します。

MIME タイプの識別

text/plain, text/html, image/png など、OS や他アプリから渡されたデータの「形式」を一覧表示します。

ファイルの属性

item.kind === 'file' の場合、ファイル名、サイズ、形式などのメタデータを表示します。

実データのプレビュー

item.kind === 'string' の場合、テキスト、HTML、URL などの実際の内容を抽出してプレビュー表示します。