フローティングウィンドウの不具合を解決したい

実現したいこと

フローティングウィンドウの不具合を解決したい。

前提

「Web制作の現場で使うjQueryデザイン入門[改訂新版]P228」にあるサンプルコードを
自分なりに編集して、動かせるようにしたいのですが、
意図しない不具合が生じてしまいます。

発生している問題

マウスの左ボタンを離しても、フロートウィンドウがカーソルの動きに連動していまいます。
マウスダウンイベント時に、サンプルコードでは
現れなかったドラッグ状態（青色になり文字が白くなる）になります。

HTML
1// サンプルコード
2<!DOCTYPE html>
3<html lang="ja">
4	<head>
5		<meta charset="utf-8">
6		<title>sample1</title>
7		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
8		<script>
9$(function(){
10	$("a.open").click(function(){
11		$("#floatWindow").fadeIn("fast");
12		return false;
13	});
14	
15	$("#floatWindow a.close").click(function(){
16		$("#floatWindow").fadeOut("fast");
17		return false;
18	});
19	$("#floatWindow dl dt").mousedown(function(e){
20		
21		$("#floatWindow")
22			.data("clickPointX" , e.pageX - $("#floatWindow").offset().left)
23			.data("clickPointY" , e.pageY - $("#floatWindow").offset().top);
24		
25		$(document).mousemove(function(e){
26			$("#floatWindow").css({
27				top:e.pageY  - $("#floatWindow").data("clickPointY")+"px",
28				left:e.pageX - $("#floatWindow").data("clickPointX")+"px"
29			});
30		});
31	}).mouseup(function(){
32		$(document).unbind("mousemove");
33	});
34});
35		</script>
36		<style>
37#floatWindow{
38	display:none;
39	position:absolute;
40	width:500px;
41	height:400px;
42	top:100px;
43	left:100px;
44}
45#floatWindow a.close{
46	position:absolute;
47	right:20px;
48	top:1px;
49}
50#floatWindow a.close img{
51	border:none;
52}
53#floatWindow dl{
54	width:100%;
55	height:100%;
56	background:url("./images/floatWindow.png");
57	margin:0;
58}
59#floatWindow dl dt{
60	height:25px;
61	line-height:25px;
62	text-indent:1em;
63	color:white;
64	font-weight:bold;
65	cursor:move;
66}
67#floatWindow dl dd{
68	margin:0;
69	padding:2em;
70	line-height:1.5;
71	text-indent:1em;
72}
73
74		</style>
75	</head>
76	<body>
77		
78		<a href="#floatWindow" class="open">フローティングウィンドウの表示</a>
79		
80		<div id="floatWindow">
81			<a href="sample1.html" class="close"><img src="./images/close.png" alt="閉じる"></a>
82			<dl>
83				<dt>jQueryによるフローティングウィンドウの作成</dt>
84				<dd>今回はjQueryでフローティングウィンドウを作成する方法を解説します。フローティングウィンドウとはWebページ上にドラッグ可能な別の子ウィンドウを表示するUIのことです。ポップアップなどで表示されるウィンドウとは異なりブラウザのポップアップブロックなどの影響を受けず、また、元のサイトにレイアウトなどに影響を与えずにウィンドウを表示することが可能になっています。</dd>
85			</dl>
86		</div>
87	</body>
88</html>

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

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

jQuery
1// 自分で編集したコード
2jQuery(function($) {
3
4  const doc = $(document);
5
6  $('a#open').on('click', function() {
7
8    $('dialog#floatWindow').fadeIn('fast');
9    return false;
10
11  });
12
13  $('a#close').on('click', function() {
14
15    $('dialog#floatWindow').fadeOut('fast');
16    return false;
17
18  });
19
20  $('dialog#floatWindow > * > dt')
21    .on('mousedown', function(evt) { // マウスボタンが押された場合
22
23      $('dialog#floatWindow')
24        .data({ clickPointX : evt.pageX - $('dialog#floatWindow').offset().left })
25        .data({ clickPointY : evt.pageY - $('dialog#floatWindow').offset().top  });
26
27      doc.on('mousemove', function(evt) {
28
29        $('dialog#floatWindow').css({
30          top  : `${ evt.pageY - $('dialog#floatWindow').data('clickPointY') }px`,
31          left : `${ evt.pageX - $('dialog#floatWindow').data('clickPointX') }px`
32        });
33
34      });
35
36    })
37    .on('mouseup', function() { // マウスボタンが離された場合
38
39      doc.off('mousemove');
40
41  });

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

回答1件

ベストアンサー

.floatWindow のルールセットに margin: 0; を足しましょう。または、<dialog> を <div> に戻しましょう。

<dialog> はデフォルトでマージンが設定されています。このコードの場合は left プロパティはマージンの開始位置になるため、マウスカーソルの位置から離れた場所にウィンドウの位置が移動してしまいます。

投稿2023/05/22 21:56

int32_t

総合スコア21695

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

フローティングウィンドウの不具合を解決したい

実現したいこと

前提

発生している問題

関連した質問