ドラッグ＆ドロップ時にマウスカーソルに表示される画像を変更するには

ドラッグ＆ドロップ時にマウスカーソルに表示される画像を変更するには

解説

ブラウザによっても異なりますが、ドラッグ中には、ドラッグされている要素の半透明の画像などが、マウスカーソルの位置に表示されます。

Drag and Drop APIでは、この画像を任意のものに変更することができます。(IEは現在未実装です)

ondragstartイベントハンドラで、引数eventのdataTransfer属性のメソッド「setDragImage(image, x, y)」を呼び出します。第１引数にはimg要素やcanvas要素などの描画要素を指定します。引数xとyは、画像左上を原点（0,0）とした場合の、マウスカーソルの相対的な位置を指定します。（右方向と下方向が正の値になります）

// sourceはドラッグされる要素、imageはimg要素
source.ondragstart = function(event){
   var dt = event.dataTransfer;
   dt.setData("Text",event.target.id);
   dt.setData("text/plain",event.target.id); 
   dt.setDragImage(image, image.width / 2,  image.height / 2);
}

ここでは、画像の幅と高さのそれぞれ2分の1を指定することで、画像の中心がカーソル位置になるようにしています。

関連項目

（関連する項目はありません）