ドラッグ&ドロップ時にマウスカーソルに表示される画像を変更するには
解説
ブラウザによっても異なりますが、ドラッグ中には、ドラッグされている要素の半透明の画像などが、マウスカーソルの位置に表示されます。
Drag and Drop APIでは、この画像を任意のものに変更することができます。(IEは現在未実装です)
ondragstartイベントハンドラで、引数eventのdataTransfer属性のメソッド「setDragImage(image, x, y)」を呼び出します。第1引数には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を指定することで、画像の中心がカーソル位置になるようにしています。
関連項目
(関連する項目はありません)