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

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

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

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

Q&A

解決済

1回答

254閲覧

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

taka_oct092018

総合スコア134

jQuery

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

0グッド

0クリップ

投稿2023/05/22 08:13

実現したいこと

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

前提

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

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

投稿2023/05/22 21:56

int32_t

総合スコア21535

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問