◆ ドラッグ中の画像を変更
◆ テキストボックスにドロップしたときの文字列を設定
◆ タブエリアにドロップしたときの URL を設定
◆ デスクトップにドロップしたときに保存されるデータを設定

ドラッグアンドドロップをカスタマイズしようという思いつきでやってみました

<!doctype html>
<meta charset="utf-8"/>

<div class="drag-item" draggable="true">Drag me!</div>
<input>

<div class="dragging-image">ドラッグ中</div>

<style>
.drag-item {
margin: 30px;
padding: 5px 10px;
background: paleturquoise;
display: inline-block;
}
.dragging-image {
position: absolute;
top: -1000px;
padding: 10px;
background: yellow;
}
</style>

<script>
const qs = document.querySelector.bind(document)

qs(".drag-item").addEventListener("dragstart", eve => {
const dragging_image = qs(".dragging-image")
eve.dataTransfer.setDragImage(dragging_image, dragging_image.clientWidth / 2, dragging_image.clientHeight / 2)
eve.dataTransfer.setData("DownloadURL", "text/plain:drag_file.txt:data:text/plain,DRAGFILE")
eve.dataTransfer.setData("text", "drag text")
eve.dataTransfer.setData("url", "data:text/html,<h1>drag url</h1>")
})
</script>

上の HTML のプレビューで 「Drag me!」 と書いた要素をドラッグしてみてください

draggable

ドラッグ対象にしたい要素には draggable 属性をつけます
boolean 属性みたいなのに値には true か false を文字列で指定必要という特殊な属性です
どの要素にでもつけることができます

「draggable="true"」 がついてるとドラッグできるようになります

setDragImage

drag 中のカスタマイズをするには dragstart イベントをリッスンして event.dataTransfer でアクセスできるオブジェクトを操作します

setDragImage メソッドで HTMLElement を指定すると ドラッグ中のマウス付近に出てくる画像を変更できます
掴んでるのは 「Drag me!」 という青色の要素なのに 「ドラッグ中」と書かれた黄色の要素を掴んでるように見えると思います

2, 3 番目の引数でオフセットを指定します
デフォルトだとマウスの右下の方に表示されるのですが マウスが要素の真ん中に来るようにしています
要素の width と height の半分の値を設定すればいいです

アニメーションさせたかったのですが 掴んでいる間は CSS Animation は無効になりました
セットした時点の状態で固定されます
たぶん Gif アニメの画像にしても一緒だと思います

setData

setData ではドラッグ中のデータの情報を設定できます
text や url など複数の情報を設定できます
どの情報をどう使うかはドロップ先によって決まります

text

text にはテキスト情報を設定します
「Drag me!」をドラッグして隣の input にドロップしてみてください
input ではドロップされた場所にテキストデータを追加します

追加されたテキストは "drag text" になってると思います
この文字列はドラッグ中のデータを設定しただけです
JavaScript で input の制御は一切行っていません

url

url には URL を設定します
「Drag me!」をドラッグしてブラウザのタブエリアにドロップしてみてください
「drag url」と書かれた HTML ページが表示できると思います

ブラウザのタブエリアに URL をドロップするとその URL が新しいタブで開かれます
a タグをドラッグアンドドロップしたのと一緒です

DownloadURL

DownloadURL はブラウザの外のデスクトップやエクスプローラの画面にドロップしたときに使われます
ドロップしたときに作られるファイルの名前と中身を指定できます
名前の通り 基本は URL を指定してそれをダウンロードする機能になっています
リンクをドロップするとそのページへのリンクのショートカットが作られ 画像をドロップするとその画像を保存できます

DownloadURL では「A:B:C」のように「:」区切りのフォーマットを指定します
A の部分にはダウンロードデータの mime type を指定します
B の部分にはファイル名を指定します
C の部分にはダウンロード先の URL を指定します

「Drag me!」の要素では DataURL を使って「DRAGFILE」という中身のテキストファイルをダウンロードし 「drag_file.txt」 という名前で保存するようにしています