DOM：DataTransfer.setDragImage メソッド

dragstart のイベントハンドラー内で使用する必要があります。

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

構文

戻り値

例

mdnより

`DataTransfer`	DataTransfer。
`imgElement`	ドラッグのフィードバック画像に使用する画像 Element 要素です。もし Element が img 要素であれば、ドラッグデータストアのビットマップを（その要素に固有のサイズで）その要素の画像に設定します。そうでなければ、ドラッグデータストアのビットマップを、与えられた要素から生成された画像に設定します（そのための正確なメカニズムは現在のところ指定されていません）。注：もし Element が既存の HTMLElement であれば、ドラッグフィードバック画像として表示するために、ビューポートに表示されている必要があります。あるいは、この目的のために、画面外にあるような新しい DOM 要素を作成することができます。
`xOffset`	画像内の水平方向のオフセットを示す long の数値。
`yOffset`	画像内の垂直方向のオフセットを示す long の数値。

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

HTML：

<!DOCTYPE html>
<html lang=en>
<title>Example of 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" を既存の画像に変更しないと画像が作成されず、
 // デフォルトのドラッグ画像が使用されます。
 const 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であるデータを取得します。
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
<h1>Example of <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>

dragstart イベントと setDragImage()

HTML：

<IMG id=IdImg src="../../Sample/Picture.jpg"><BR>
<IMG hidden id=IdImg2 src="../../Sample/Picture.jpg"><BR>
<DIV id=IdTest contenteditable>ここにドラッグ＆ドロップ操作をしてみて<B>[B要素]</B>テキスト…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript：

function Job(eve){  //dragstart イベントの処理：
  D=eve;
  DA=eve.dataTransfer;
//  IdImg2.hidden=false;  //隠れているのを解除する。
  eve.dataTransfer.setDragImage(IdImg, 0, 0);  //画像割り当て。
  IdLog.innerHTML=IdLog.innerHTML+"●";  //表示。
}
document.ondragstart=Job;  //イベント割り当て。

文書内にある画像だとそのまま見えてしまうのが問題あるだろう。なんとかして隠さないと面白くない。

hidden 属性でやってみても、hidden を解除すると、原画像も表示されてしまう。

HTML： position:absolute 使用。

<IMG id=IdImg style="position:absolute; left:-100px;" src="../../Sample/Picture.jpg">
<DIV id=IdTest contenteditable>ここにドラッグ＆ドロップ操作をしてみて<B>[B要素]</B>テキスト…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript：

function Job(eve){  //dragstart イベントの処理：
  D=eve;
  DA=eve.dataTransfer;
  eve.dataTransfer.setDragImage(IdImg, 0, 0);  //画像割り当て。
  IdLog.innerHTML=IdLog.innerHTML+"●";  //表示。
}
document.ondragstart=Job;  //イベント割り当て。

「position:absolute; left:100px」により画面の外エリアに配置してしまって、解決。

DOM

DW("DOM")

DataTransfer.setDragImage() メソッド

構文

戻り値

例

mdnより

dragstart イベントと setDragImage()

テスト