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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/19 06:56
2023/05/19 07:11
2023/05/19 13:20