質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2117閲覧

css/jsでドラッグアンドドロップ中のゴーストを非表示にしたい。

Kos_

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2023/05/28 19:40

実現したいこと

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}

解決案を頂けたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

kei344

総合スコア69558

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

htmlの要素にdraggable属性を明示的に記述することで実現できます。

html

1<img draggable="false" src="tmp.jpeg" id="target">

※cssのuser-dragを指定することでも同様の効果は得られますが、上記の解決方法が一般的に普及したため対応しているブラウザが少ないです。

ただし、ドラッグを不可能にするのは手段であり目的ではありません。
XY問題になっている可能性を検討してみてください。
また、画像の保存を止めたいと考えている場合、基本的に保存が面倒になるだけで完璧な阻止は不可能です。

投稿2023/05/29 05:03

ziopuzzle

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/05/29 07:24

draggable属性を利用しても画像を選択状態にするとゴースト(?)はでますね。 なんのためにどうしたいか明示したほうがよいでしょう
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問