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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

232閲覧

HTMLでリンク付きの画像をマウスで移動させたい

11h45m

総合スコア12

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2019/05/02 10:33

実現したいことと現状

◆実装したいこと
・HP上でリンクの付いている画像がドラッグで位置を変えることができる。
・画像をドラッグではなく、クリックした時のみリンク先に飛ぶ
・上記を複数つくる(3つ)
◆現状
・HTML,CSS,JavaScriptは別ファイルで作成(読み込んでいるのは確認済み)
・画像をドラッグで個別に移動できる
・ドラッグ後にマウスボタンを離した際にリンク先に飛んでしまう
・aタグにdisabledクラスを付与してpointer-events: none;でリンクを消すことには出来たがこの先に続かず
(下記コードではaタグからdisabledクラスを消しています)

該当のソースコード

JavaScript

1(function(){ 2 var elements = document.getElementsByClassName("x"); 3 4 var x; 5 var y; 6 7 for(var i = 0; i < elements.length; i++) { 8 elements[i].addEventListener("mousedown", mdown, false); 9 } 10 11 function mdown(e) { 12 //「y」クラスを追加し、CSSでドラッグ状態を区別 13 this.classList.add("y"); 14 15 x = e.pageX - this.offsetLeft; 16 y = e.pageY - this.offsetTop; 17 18 document.body.addEventListener("mousemove", mmove, false); 19 } 20 21 function mmove(e) { 22 var dragObj = document.getElementsByClassName("y")[0]; 23 24 e.preventDefault(); 25 26 dragObj.style.top = e.pageY - y + "px"; 27 dragObj.style.left = e.pageX - x + "px"; 28 29 dragObj.addEventListener("mouseup", mup, false); 30 document.body.addEventListener("mouseleave", mup, false); 31 } 32 33 function mup(e) { 34 var dragObj = document.getElementsByClassName("y")[0]; 35 36 document.body.removeEventListener("mousemove", mmove, false); 37 dragObj.removeEventListener("mouseup", mup, false); 38 39 dragObj.classList.remove("y"); 40 } 41})()

HTML

1<head> 2 <link rel="stylesheet" type="text/css" href="test.css"> 3</head> 4<body> 5 <div class="x"><a href="test_Html2.html"><img src="image/test_Img01.png"></a></div> 6 <div class="x"><a href="test_Html3.html"><img src="image/test_Img02.png"></a></div> 7 <script type="text/javascript" src="test.js"></script> 8</body>

CSS

1.x{position: absolute; 2} 3 4.y { 5} 6a.disabled{ 7 pointer-events: none; 8}

試したことと考えていること

ドラッグ中のみリンクを無効化できないかと思い、ドラッグ状態を区別して「pointer-events: none;」を記載。
ドラッグイベント自体が消えたのかドラッグ不可に。
b.{}を追加したようにaタグにも一時的にクラスを付与・削除することは出来るのでしょうか?
それらが実行されるタイミング的にうまくいくかは不明ですが、何か別の方法もありましたらご教授ください。

質問者のスキル

・Jqueryはさわったことがありません。
・Javaはわかりますが、JavaScriptは初心者です。
・部分的に綺麗なコードと汚いコードがあるかもしれませんが、一部知り合いが教わりながらつくったためです。

足りない情報はありますでしょうか。
どうかよろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

普段はjQueryを使っているので調べながら書きましたが、これでどうでしょうか
ページ遷移をJavaScriptで行うようにしました。
追加した箇所にはコメントも載せたので参考にしてください。

JavaScript

1(function(){ 2 var elements = document.getElementsByClassName("x"); 3 4 var x; 5 var y; 6 var flag=0;//0->初期状態、1->mousdown、2->1度でもカーソルを動かした状態 7 8 9 for(var i = 0; i < elements.length; i++) { 10 elements[i].addEventListener("mousedown", mdown, false); 11 } 12 13 function mdown(e) { 14 //「y」クラスを追加し、CSSでドラッグ状態を区別 15 this.classList.add("y"); 16 17 x = e.pageX - this.offsetLeft; 18 y = e.pageY - this.offsetTop; 19 20 document.body.addEventListener("mousemove", mmove, false); 21 document.body.addEventListener("mouseup", mup, false);//マウスを動かさないでクリックのみ 22 flag=1; 23 } 24 25 function mmove(e) { 26 var dragObj = document.getElementsByClassName("y")[0]; 27 28 dragObj.addEventListener("mouseup", mup, false); 29 document.body.addEventListener("mouseleave", mup, false); 30 flag=2; 31 32 e.preventDefault(); 33 34 dragObj.style.top = e.pageY - y + "px"; 35 dragObj.style.left = e.pageX - x + "px"; 36 37 38 } 39 40 function mup(e) { 41 var dragObj = document.getElementsByClassName("y")[0]; 42 43 document.body.removeEventListener("mousemove", mmove, false); 44 dragObj.removeEventListener("mousemove", mmove, false); 45 dragObj.removeEventListener("mouseup", mup, false); 46 dragObj.removeEventListener("mouseleave", mup, false);//mousleaveも消しておきましょう 47 48 dragObj.classList.remove("y"); 49 50 if (flag==1){カーソルを動かさずクリックのみ 51 var obj=e.target.getElementsByTagName('a'); 52 window.location.href=obj[0].getAttribute('href'); 53 //新しいタブで開くなら->window.open(obj[0].getAttribute('href')); 54 flag=0; 55 } 56 } 57})()

投稿2019/05/09 07:07

編集2019/05/09 16:35
2ckD

総合スコア305

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

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

11h45m

2019/05/09 15:37 編集

回答ありがとうございます! JavaScriptでリンクの有効無効を操作するんですね。 そもそもそこに思い至りませんでした。思い至っても頭を抱えていたと思いますが。 今日は時間が無かったので動きだけ見てみようと思い頂いたものをコピーしたところ、ドラッグイベントが動きませんでした。 まだ詳細を理解できていないので、今のところ原因は確認できていません。 ちゃんとしたご報告に時間がかかると思うので、まずは感謝と第一報を(不快でしたらすみません)。 金曜には時間が出来ると思うため、頂いたものを参考に勉強させていただきます。ご報告は少しお待ちください。 折角回答していただいたのに申し訳ありません。 注釈もありがとうございました。
2ckD

2019/05/09 16:34

mmoveから「dragObj.addEventListener("mouseup", mup, false);」をコメントアウトしてしまいましたが、 残しておかないとドラッグイベントが消えてしまいます。 失礼しました。
11h45m

2019/06/01 03:38

遅くなってしまい申し訳ありません。 問題が解決しました。丁寧なご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問