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

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

ただいまの
回答率

90.01%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 262

11h45m

score 5

実現したいことと現状

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

該当のソースコード

(function(){
    var elements = document.getElementsByClassName("x");

    var x;
    var y;

    for(var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("mousedown", mdown, false);
    }

    function mdown(e) {
        //「y」クラスを追加し、CSSでドラッグ状態を区別
        this.classList.add("y");

        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;

        document.body.addEventListener("mousemove", mmove, false);
    }

    function mmove(e) {
        var dragObj = document.getElementsByClassName("y")[0];

        e.preventDefault();

        dragObj.style.top = e.pageY - y + "px";
        dragObj.style.left = e.pageX - x + "px";

        dragObj.addEventListener("mouseup", mup, false);
        document.body.addEventListener("mouseleave", mup, false);
    }

    function mup(e) {
        var dragObj = document.getElementsByClassName("y")[0];

        document.body.removeEventListener("mousemove", mmove, false);
        dragObj.removeEventListener("mouseup", mup, false);

        dragObj.classList.remove("y");
    }
})()
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div class="x"><a href="test_Html2.html"><img src="image/test_Img01.png"></a></div>
    <div class="x"><a href="test_Html3.html"><img src="image/test_Img02.png"></a></div>
    <script type="text/javascript" src="test.js"></script>
</body>
.x{position: absolute;
}

.y {
}
a.disabled{
    pointer-events: none;
}

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

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

質問者のスキル

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

(function(){
    var elements = document.getElementsByClassName("x");

    var x;
    var y;
    var flag=0;//0->初期状態、1->mousdown、2->1度でもカーソルを動かした状態


    for(var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("mousedown", mdown, false);
    }

    function mdown(e) {
        //「y」クラスを追加し、CSSでドラッグ状態を区別
        this.classList.add("y");

        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;

        document.body.addEventListener("mousemove", mmove, false);
        document.body.addEventListener("mouseup", mup, false);//マウスを動かさないでクリックのみ
        flag=1;
    }

    function mmove(e) {
        var dragObj = document.getElementsByClassName("y")[0];

        dragObj.addEventListener("mouseup", mup, false);
        document.body.addEventListener("mouseleave", mup, false);
        flag=2;

        e.preventDefault();

        dragObj.style.top = e.pageY - y + "px";
        dragObj.style.left = e.pageX - x + "px";


    }

    function mup(e) {
        var dragObj = document.getElementsByClassName("y")[0];

        document.body.removeEventListener("mousemove", mmove, false);
        dragObj.removeEventListener("mousemove", mmove, false);
        dragObj.removeEventListener("mouseup", mup, false);
        dragObj.removeEventListener("mouseleave", mup, false);//mousleaveも消しておきましょう

        dragObj.classList.remove("y");

        if (flag==1){カーソルを動かさずクリックのみ
                var obj=e.target.getElementsByTagName('a');
                window.location.href=obj[0].getAttribute('href');
                //新しいタブで開くなら->window.open(obj[0].getAttribute('href'));
                flag=0;
        }
    }
})()

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/10 00:18 編集

    回答ありがとうございます!
    JavaScriptでリンクの有効無効を操作するんですね。
    そもそもそこに思い至りませんでした。思い至っても頭を抱えていたと思いますが。

    今日は時間が無かったので動きだけ見てみようと思い頂いたものをコピーしたところ、ドラッグイベントが動きませんでした。
    まだ詳細を理解できていないので、今のところ原因は確認できていません。
    ちゃんとしたご報告に時間がかかると思うので、まずは感謝と第一報を(不快でしたらすみません)。

    金曜には時間が出来ると思うため、頂いたものを参考に勉強させていただきます。ご報告は少しお待ちください。
    折角回答していただいたのに申し訳ありません。
    注釈もありがとうございました。

    キャンセル

  • この投稿は削除されました

  • 2019/05/10 01:34

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

    キャンセル

  • 2019/06/01 12:38

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

    キャンセル

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

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる