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

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

新規登録して質問してみよう
ただいま回答率
85.42%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

320閲覧

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

taka_oct092018

総合スコア133

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/18 06:58

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($) {})

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2023/05/18 22:26

編集2023/05/18 22:27
int32_t

総合スコア21252

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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様 返信ありがとうございます。 先入観による勘違いをしておりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問