Q&A
draggable属性を利用しても画像を選択状態にするとゴースト（？）はでますね。
なんのためにどうしたいか明示したほうがよいでしょう
実現したいこと
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件
0
ベストアンサー
透明の画像を適切に用意すれば「ゴースト」は非表示に出来ます。ただ残念ながら「ドラッグ中アイコン」自体を消す／変える方法は無いかもしれません。
js
1var target = document.getElementById( "target" ); 2const img = document.createElement('img'); 3img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; 4 5target.addEventListener( "dragstart", function( e ){ 6 e.dataTransfer.setDragImage( img, 0, 0 ); 7}, false );
動くサンプル：https://jsfiddle.net/kby2nm7a/
【base64でbrank.gifを生成する 🖼 - みかづきブログ・カスタム】
https://blog.kimizuka.org/entry/2020/07/21/172105
img.active で切り替えするコードは参考にされたページにあるように、クラスを割り当てる必要があります。
js
1var target = document.getElementById( "target" ); 2 3target.addEventListener( "dragstart", function( e ){ 4 e.target.classList.add('active'); 5}, false ); 6target.addEventListener( "dragend", function( e ){ 7 e.target.classList.remove('active'); 8}, false );
動くサンプル：https://jsfiddle.net/ud7zt0x3/
もし、最終的な目的の挙動が「ドラッグアンドドロップさせたくない」ということであれば、user-select: none; で選択しなくなります。
【user-select - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/user-select
投稿2023/05/29 16:19
総合スコア69250
0
htmlの要素にdraggable属性を明示的に記述することで実現できます。
html
1<img draggable="false" src="tmp.jpeg" id="target">
※cssのuser-dragを指定することでも同様の効果は得られますが、上記の解決方法が一般的に普及したため対応しているブラウザが少ないです。
ただし、ドラッグを不可能にするのは手段であり目的ではありません。
XY問題になっている可能性を検討してみてください。
また、画像の保存を止めたいと考えている場合、基本的に保存が面倒になるだけで完璧な阻止は不可能です。
投稿2023/05/29 05:03
総合スコア90
回答へのコメント
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。