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

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

総合スコア21929

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イベント時のイベントオブジェクトを同一視していたことが、私の間違いだったのかもしれません。