実現したいことと現状
◆実装したいこと
・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は初心者です。
・部分的に綺麗なコードと汚いコードがあるかもしれませんが、一部知り合いが教わりながらつくったためです。
足りない情報はありますでしょうか。
どうかよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 15:37 編集
2019/05/09 16:34
2019/06/01 03:38