\n\n```\n```css\nimg.active {\n\tvisibility: hidden;\n}\n```\n\n解決案を頂けたら幸いです。\n","answerCount":2,"upvoteCount":0,"datePublished":"2023-05-28T19:40:41.542Z","dateModified":"2023-05-30T01:19:15.000Z","acceptedAnswer":{"@type":"Answer","text":"透明の画像を適切に用意すれば「ゴースト」は非表示に出来ます。ただ残念ながら「ドラッグ中アイコン」自体を消す／変える方法は無いかもしれません。\n```js\nvar target = document.getElementById( \"target\" );\nconst img = document.createElement('img');\nimg.src = \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\";\n\ntarget.addEventListener( \"dragstart\", function( e ){\n e.dataTransfer.setDragImage( img, 0, 0 );\n}, false );\n```\n動くサンプル：[https://jsfiddle.net/kby2nm7a/](https://jsfiddle.net/kby2nm7a/)\n\n【base64でbrank.gifを生成する 🖼 - みかづきブログ・カスタム】\n[https://blog.kimizuka.org/entry/2020/07/21/172105](https://blog.kimizuka.org/entry/2020/07/21/172105)\n\n---\n\n`img.active` で切り替えするコードは参考にされたページにあるように、クラスを割り当てる必要があります。\n```js\nvar target = document.getElementById( \"target\" );\n\ntarget.addEventListener( \"dragstart\", function( e ){\n e.target.classList.add('active');\n}, false );\ntarget.addEventListener( \"dragend\", function( e ){\n e.target.classList.remove('active');\n}, false );\n```\n動くサンプル：[https://jsfiddle.net/ud7zt0x3/](https://jsfiddle.net/ud7zt0x3/)\n\n---\n\nもし、最終的な目的の挙動が「ドラッグアンドドロップさせたくない」ということであれば、`user-select: none;` で選択しなくなります。\n\n\n\n【user-select - CSS: カスケーディングスタイルシート | MDN】\n[https://developer.mozilla.org/ja/docs/Web/CSS/user-select](https://developer.mozilla.org/ja/docs/Web/CSS/user-select)\n\n\n","dateModified":"2023-06-09T22:43:08.000Z","datePublished":"2023-05-29T16:19:15.361Z","upvoteCount":0,"url":"https://teratail.com/questions/8qaocimn930sev#reply-qgv0b6bfd6x2s9"},"suggestedAnswer":[{"@type":"Answer","text":"htmlの要素にdraggable属性を明示的に記述することで実現できます。\n```html\n\n```\n※cssのuser-dragを指定することでも同様の効果は得られますが、上記の解決方法が一般的に普及したため対応しているブラウザが少ないです。\n\n\nただし、ドラッグを不可能にするのは手段であり目的ではありません。\nXY問題になっている可能性を検討してみてください。\nまた、画像の保存を止めたいと考えている場合、基本的に保存が面倒になるだけで完璧な阻止は不可能です。","dateModified":"2023-05-29T05:03:36.238Z","datePublished":"2023-05-29T05:03:36.238Z","upvoteCount":0,"url":"https://teratail.com/questions/8qaocimn930sev#reply-s1xfk78u2fdesa","comment":[{"@type":"Comment","text":"draggable属性を利用しても画像を選択状態にするとゴースト（？）はでますね。\nなんのためにどうしたいか明示したほうがよいでしょう\n","datePublished":"2023-05-29T07:24:37.564Z","dateModified":"2023-05-29T07:24:37.564Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問
JavaScript

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

CSS

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

Q&A

解決済

2回答

3539閲覧

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

Kos_
Kos_

総合スコア9

JavaScript

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

CSS

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

0グッド

1クリップ

投稿2023/05/28 19:40

0

1

実現したいこと

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
kei344

総合スコア69643

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

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

0

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

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

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

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

投稿2023/05/29 05:03

ziopuzzle
ziopuzzle

総合スコア90

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

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

yambejp
yambejp

2023/05/29 07:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

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