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

実現したいこと

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

前提

「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  });