DataTransfer.setDragImage()

ドラッグが発生すると、ドラッグ対象 (dragstart イベントが発生した要素) から半透明の画像が生成され、ドラッグ中にマウスポインタに沿って移動します。この画像は自動的に作成されるので、自分で作成する必要はありません。ただし、カスタム画像が必要な場合は、DataTransfer.setDragImage() メソッドを使用して、使用するカスタム画像を設定することができます。画像は通常、<image> 要素になりますが、<canvas> やその他の可視要素であっても構いません。

メソッドの x 座標と y 座標は、マウスポインタに対する画像の相対的な表示方法を定義します。これらの座標は、マウスカーソルがあるべき画像のオフセットを定義します。例えば、ポインタが中心に来るように画像を表示するには、画像の幅と高さの半分の値を使用します。

このメソッドは dragstart イベントハンドラ内で呼び出す必要があります。

シンタックス

void dataTransfer.setDragImage(img | element, xOffset, yOffset);

引数

img | element
ドラッグフィードバック画像に使用する画像 Element 要素。
もし Element が img 要素であれば、ドラッグデータストアのビットマップをその要素の画像に設定します (その要素に固有のサイズで)。そうでなければ、ドラッグデータストアのビットマップを、与えられた要素から生成された画像に設定します (そのための正確なメカニズムは現在のところ指定されていません)。
xOffset
画像内の水平方向のオフセットを示す long。
yOffset
画像内の垂直方向のオフセットを示す long。

戻り値

void

例

この例では、setDragImage() メソッドの使用方法を示します。この例では example.gif という名前の画像ファイルを参照していることに注意しましょう。そのファイルが存在する場合はそのファイルがドラッグ画像として使用され、そのファイルが存在しない場合はブラウザがデフォルトのドラッグ画像を使用します。

demo

<!DOCTYPE html>
<html lang=ja>
<title>DataTransfer.setDragImage() の例</title>
<meta name="viewport" content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart_handler(ev) {
 console.log("dragStart");
 // ドラッグのフォーマットとデータを設定します。データにはイベントターゲットの ID を使用します。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 // 画像を作成してドラッグ画像に使用する
 // 注意: "example.gif" を既存の画像に変更しないと画像が作成されず、
 // デフォルトのドラッグ画像が使用されます。
 var img = new Image(); 
 img.src = 'example.gif'; 
 ev.dataTransfer.setDragImage(img, 10, 10);
}

function dragover_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
}

function drop_handler(ev) {
 console.log("Drop");
 ev.preventDefault();
 // ドロップ対象のIDであるデータを取得します。
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
<h1><code>DataTransfer.setDragImage()</code> の例</h1>
 <div>
   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
 </div>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>

仕様

仕様書 ステータス コメント
HTML Living Standard
setDragImage() の定義		 現行の標準
HTML 5.1
setDragImage() の定義		 勧告 W3C HTML5 に含まれない 勧告。

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
setDragImageChrome 完全対応 ありEdge 完全対応 18Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

あわせて参照