実現したいこと
css/jsでドラッグアンドドロップ中のゴーストを非表示にしたい。
ただし、この時に元の画像は表示したままにしたい。
前提
jsを勉強しています。ドラッグアンドドロップの操作において、操作中のゴーストを無効化したいです。
ドラッグ時に、この禁止マークのマウスカーソルを通常のマウスカーソルのままに、薄く透けてマウスカーソルに追従する画像を消し、元の濃い画像はそのままにしたいです。
試したこと
https://www.ipentec.com/document/javascript-hide-drag-element-while-drag-and-drop
のページを参考にしてcssの.active要素で、imgに直接 visibility: hidden; を設定してみたり、jsでdragstartイベントで空のイメージをセットしてみたりしましたが特に変化はありませんでした。
html
1<!DOCTYPE HTML> 2<html lang="en"> 3<head> 4<link rel="stylesheet" href="css/tmp.css"> 5</head> 6<body> 7 <img src="tmp.jpeg" id="target"> 8</body> 9<script> 10 var target = document.getElementById( "target" ); 11 target.addEventListener( "dragstart", function( e ){ 12 e.dataTransfer.setDragImage( new Image(), 0, 0 ); 13 }, false ); 14</script> 15</html>
css
1img.active { 2 visibility: hidden; 3}
解決案を頂けたら幸いです。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。