フローティングウィンドウの座標の求め方について。

doc.on('mousemove', function(evt) {}内の処理について疑問があります。
「Web制作の現場で使うjQueryデザイン入門[改訂新版]P228」より、一部編集しています。

jQuery
1// サンプルコードの疑問の箇所
2$('dialog#floatWindow').css({
3  top  : `${ evt.pageY - $('dialog#floatWindow').data('clickPointY') }px`,
4  left : `${ evt.pageX - $('dialog#floatWindow').data('clickPointX') }px`
5});

サンプルのコードは下記の物に置き換えても良さそうに思えます。

jQuery
1$('dialog#floatWindow').css({
2  top  : `${ $('dialog#floatWindow').data('clickPointY') }px`,
3  left : `${ $('dialog#floatWindow').data('clickPointX') }px`
4});

実行してみると意図した通りには動いてくれません。

「evt.pageX - evt.pageX」の計算が冗長に思うのですが、
イベント処理にはevtオブジェクトが必要なので、サンプルのようなコードになるのでしょうか。

よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title></title>
6    <!-- jQuery -->
7    <script crossorigin="anonymous"
8            integrity  ="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
9            src        ="https://code.jquery.com/jquery-3.3.1.min.js">
10    </script>
11    <link href="css/style.css" rel="stylesheet">
12  </head>
13  <body>
14    <a href="#floatWindow" id="open">フローティングウィンドウの表示</a>
15    <dialog class="floatWindow" id="floatWindow">
16      <a class="close" href="idx.html" id="close">
17        <img alt="閉じる" src="img/close.png">
18      </a>
19      <dl>
20        <dt>jQueryによるフローティングウィンドウの作成</dt>
21        <dd>
22          今回はjQueryでフローティングウィンドウを作成する方法を解説します。
23          フローティングウィンドウとはWebページ上にドラッグ可能な別の子ウィンドウを表示するUIのことです。
24          ポップアップなどで表示されるウィンドウとは異なりブラウザのポップアップブロックなどの影響を受けず、
25          また、元のサイトにレイアウトなどに影響を与えずにウィンドウを表示することが可能になっています。
26        </dd>
27      </dl>
28    </dialog>
29    <script src="js/app.js"></script>
30  </body>
31</html>

CSS
1@charset utf-8;
2
3a.close {
4  position : absolute;
5  right    : 2em;
6}
7
8a.close > img { border : none; }
9
10dialog.floatWindow {
11  display  : none;
12  height   : 400px;
13  left     : 100px;
14  position : absolute;
15  top      : 100px;
16  width    : 500px;
17}
18
19dialog.floatWindow > * > dd {
20  line-height : 1.5;
21  margin      : 0;
22  padding     : 2em;
23  text-indent : 1em;
24}
25
26dialog.floatWindow > * > dt {
27  color       : #FFF;
28  cursor      : move;
29  font-weight : 700;
30  height      : 25px;
31  line-height : 25px;
32  text-indent : 1em;
33}
34
35dialog.floatWindow > dl {
36  background : url(../img/floatWindow.png);
37  height     : 100%;
38  margin     : 0;
39  width      : 100%;
40}

jQuery(function($) {

  const doc = $(document);

  $('a#open').on('click', function() {

    $('dialog#floatWindow').fadeIn('fast');
    return false;

  });

  $('a#close').on('click', function() {

    $('dialog#floatWindow').fadeOut('fast');
    return false;

  });

  $('dialog#floatWindow > * > dt')
    .on('mousedown', function(evt) { // マウスボタンが押された場合

      $('dialog#floatWindow')
        .data({ clickPointX : evt.pageX - $('dialog#floatWindow').offset().left })
        .data({ clickPointY : evt.pageY - $('dialog#floatWindow').offset().top  });

      doc.on('mousemove', function(evt) {

        $('dialog#floatWindow').css({
          top  : `${ evt.pageY - $('dialog#floatWindow').data('clickPointY') }px`,
          left : `${ evt.pageX - $('dialog#floatWindow').data('clickPointX') }px`
        });

      });

    })
    .on('mouseup', function() { // マウスボタンが離された場合

      doc.off('mousemove');

  });

}); // jQuery(function($) {})

行動規範の内容に同意します

回答1件

ベストアンサー

mousemove イベント起きた時点のマウスカーソルの座標が必要なので、evt.pageX と evt.pageY が必要です。
$('dialog#floatWindow').data('clickPointY') などは mousedown 時のマウスカーソル座標などから計算された値ですが、mousedown イベント以降のマウスカーソル座標は反映されません。

サンプルのコードは下記の物に置き換えても良さそうに思えます。

どうしてそう思ったのでしょうか。

投稿2023/05/18 22:26

編集2023/05/18 22:27

int32_t

総合スコア22019

taka_oct092018

2023/05/19 06:56

int32_t様、いつも回答ありがとうございます。 clickPointXについての私なりの考えを述べさせて頂きます。「$('dialog#floatWindow').data({ clickPointX : evt.pageX - $('dialog#floatWindow').offset().left })」により、 clickPointXの値は「evt.pageX - $('dialog#floatWindow').offset().left」となります。そして、問題の「left : `${ evt.pageX - $('dialog#floatWindow').data('clickPointX') }px`」の部分なのですが、これは「evt.pageX - (evt.pageX - $('dialog#floatWindow').offset().left) 」となり、「evt.pageX - evt.pageX」は0になるので、結局「$('dialog#floatWindow').offset().left)」だけで、値が求まるように思えたからです。座標の鉛直方向成分についても同様です。 mousedownイベント時のイベントオブジェクトとmousemoveイベント時のイベントオブジェクトを同一視していたことが、私の間違いだったのかもしれません。

int32_t

2023/05/19 07:11

> mousedownイベント時のイベントオブジェクトとmousemoveイベント時のイベントオブジェクトを同一視していたことそうですね。変数名が同じだからと言って、変数の中身が同じとは言えないということです。

taka_oct092018

2023/05/19 13:20

int32_t様返信ありがとうございます。先入観による勘違いをしておりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

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

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

ただいまの回答率
85.29%

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

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

質問する