この例では、参照用のJavaScriptポップアップドラッグウィンドウの特定の実装コードを共有します。特定のコンテンツは次のとおりです
要件の説明：
1. [ページ]ボタンをクリックして、ウィンドウをポップアップします。
2。半透明の背景マスクを持っています。
3.ポップアップウィンドウには角があり、ウィンドウは半透明ですが、コンテンツは不透明です。影付き;
4.ウィンドウをドラッグできます。
5。ドラッグが停止した後、ページをスクロールするときはウィンドウの位置が変わらないままになります。
6. jqueryを使用できます。
7.密接なボタンがあります。
さらなる機能的説明：
ボタンをクリックすると、ドラッグできるフローティングレイヤーがあります。
タイトルバーのドラッグとドロップをサポートする背景マスクがあります。タイトルバーエリアの外側にドラッグすることは効果がありません。ドラッグ関数は限られており、そのドラッグ関数は可視領域に制限されています。
アイデアをドラッグする：
マウスの位置を取得します。マウスが動いたら、マウスの位置を取得し、X軸Y軸を取得し、ウィンドウのX軸Y軸に割り当て、ウィンドウを絶対に配置します。マウスがリリースされたときにこのイベントをキャンセルします。
ドラッグアンドドロップの実装原則：
マウスが動いているとき、マウスが動いているときに浮動層の座標位置が絶えず更新されます。
1.マウスが浮動要素を押すと、フローティング要素をドラッグできるようにマークします。
2。マウスが動いているときに、最初に浮遊要素マークの変動をドラッグできるかどうかを確認します。もしそうなら、フローティング層をマウスで動かして、そうでない場合は無視します。
3.マウスが放出されると、フローティング要素をドラッグできません。
4.JSドラッグアンドドロップでは、主に3つのマウスイベント、Mousedown、Mousemove、MouseUpの3つのマウスイベントを使用します。
Mousedown：マウスを押します
マウスアップ：マウスを放出します
Mousemove：マウスの動き
注：MousedownとClickの違い：Mousedownクリックのプロセス全体が3つのイベントで発生します：Mousedown→Mouseup→Clickとクリックは、最後にマウスがリリースされた後に発生しません。
これについて言えば、マウスイベントについて話さなければなりません。
以下のマウスイベントについて簡単に説明しましょう。
（1）イベントをクリックします
（2）dbclickイベント
（3）ムーズダウンイベント
（4）マウスアップイベント
（5）マウスエンターイベント
（6）マウスオーバーイベント
（7）Mouseleaverイベント
（8）マウスアウトイベント
説明：（マウスイベントの説明はw3schoolから選択されています）
（1）クリックイベント：クリックイベントは、ユーザーが要素の左マウスボタンをタップし、同じ要素の左ボタンをリリースするとトリガーされます。
（2）dbclickイベント：要素がダブルクリックされると、dblclickイベントが発生します。マウスポインターが要素の上に留まり、左マウスボタンを押して放出すると、クリックが発生します。非常に短い時間で2回のクリックが発生します。これはダブルクリックイベントです。
例：
ボタンをダブルクリックするときは、要素を非表示または表示します。
$（document）.ready（function（）{$（ "button"）。dblclick（function（）{$（ "p"）。slidetoggle（）;}）;}）;（3）Mousedownイベント：マウスポインターが要素の上に移動してマウスボタンを押すと、Mousedownイベントが発生します。 Clickイベントとは異なり、Mousedownイベントではキーを押すだけで、発生するためにリリースする必要はありません。
$（document）.ready（function（）{$（ "button"）。mousedown（function（）{$（ "p"）。slidetoggle（）;}）;}）;（4）MouseUpイベント：マウスボタンが要素でリラックスすると、マウスアップイベントが発生します。
クリックイベントとは異なり、マウスアップイベントにはリラックスボタンのみが必要です。マウスポインターが要素の上にある場合、リラックスマウスボタンがイベントをトリガーします。
$（document）.ready（function（）{$（ "button"）。mouseup（function（）{$（ "p"）。slidetoggle（）;}）;}）;（5）MouseEnterイベント：マウスポインターが要素を通過すると、マウスエンターイベントが発生します。このイベントは、ほとんどの場合、Mouseleaveイベントで使用されます。
注：マウスオーバーイベントとは異なり、マウスエンターイベントは、マウスポインターが選択した要素を通過する場合にのみトリガーされます。マウスポインターが子供の要素を通過する場合、マウスオーバーイベントもトリガーされます。
（6）マウスオーバーイベント：マウスポインターが要素の上にある場合、マウスオーバーイベントが発生します。このイベントは、ほとんどの場合、マウスアウトイベントで使用されます。
注： Mouseenterイベントとは異なり、マウスポインターが選択した要素を通過するか、その子要素を通過するかに関係なく、マウスオーバーイベントはトリガーされます。マウスエンターイベントは、マウスポインターが選択した要素を通過する場合にのみトリガーされます。
$（document）.ready（function（）{$（ "p"）。マウスオーバー（function（）{$（ "p"）。css（ "background-color"、 "yellow"）;}）; $（ "p"）。マウスエンターとマウスオーバーの違い
<html> <head> <スクリプトタイプ= "text/javascript" src = "/jquery/jquery.js"> </script> <script> <text/javascript "> x = 0; y = 0; $（document）.ready（function（）{$（ "div.over"）。mouseover（function（）{$（ "。over span"）。text（x+= 1）;}）; $（ "div.enter"）。museenter（）{$（ "。enter span"）。テキスト（y+= 1）;};}）; </script> </head> <body> <p>マウスポインターが選択した要素を通過するか、その子要素を通過するかに関係なく、マウスオーバーイベントはトリガーされます。 </p> <p>マウスエンターイベントは、マウスポインターが選択した要素を通過する場合にのみトリガーされます。 </p> <div style = "background-color：lightinggray; padding：20px; width：40％; float：left"> <h2 style = "background-color：white;">フラッシュされたマウスオーバーイベント：<span> </span> </h2> </div> <div style = "background-color：lightgray; fidth; float"> float style = "background-color：white;">フラッシュマウスエンターイベント：<span> </span> </h2> </div> </body> </html>（7）Mouseleaverイベント：マウスポインターが要素を通過すると、マウスエンターイベントが発生します。
このイベントは、ほとんどの場合、Mouseleaveイベントで使用されます。
注：マウスアウトイベントとは異なり、Mouseleaveイベントは、マウスポインターが選択した要素を離れるときにのみトリガーされます。マウスポインターが子供の要素を離れる場合、マウスアウトイベントもトリガーされます。
（8）マウスアウトイベント
マウスアウトイベントは、マウスポインターが要素から離れて移動すると発生します。
このイベントは、ほとんどの場合、マウスオーバーイベントで使用されます。
注： Mouseleaveイベントとは異なり、マウスポインターが選択した要素を離れるか、任意の子要素を離れるかに関係なく、マウスアウトイベントはトリガーされます。 Mouseleaveイベントは、マウスポインターが選択した要素を離れるときにのみトリガーされます。
次の例のデモをご覧ください。
<html> <head> <スクリプトタイプ= "text/javascript" src = "/jquery/jquery.js"> </script> <script> <text/javascript "> x = 0; y = 0; $（document）.ready（function（）{$（ "div.out"）。mouseout（function（）{$（ "。out span"）。text（x+= 1）;}）; $（ "div.leave"）。 </script> </head> <body> <p>マウスポインターが選択した要素を離れるか、任意の子要素を離れるかに関係なく、マウスアウトイベントはトリガーされます。 </p> <p>マウスポインターが選択した要素を離れる場合にのみ、ムーセリーブイベントがトリガーされます。 </p> <div style = "background-color：lightsgray; padding：20px; width：40％; float：left"> <h2 style = "background-color：white;">フラッシュされたマウスアウトイベント：<span> </span> </h2> </div> <div style = "background-color：lightgray; padth; float"> 40％ style = "background-color：white;">フラッシュマスリーブイベント：<span> </span> </h2> </div> </body> </html>注：この記事はオリジナルです：http：//www.cnblogs.com/wanghuih/p/5569438.html
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。