回答編集履歴

1 間違いの修正

2ckD

2ckD score 193

2019/05/10 01:35  投稿

普段はjQueryを使っているので調べながら書きましたが、これでどうでしょうか
ページ遷移をJavaScriptで行うようにしました。
追加した箇所にはコメントも載せたので参考にしてください。
```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];
      //mdownですでに宣言済みなので不要-> dragObj.addEventListener("mouseup", mup, false);
      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;
       }
   }
})()
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る