Web ページでは、ボタンをクリックするとカスタム ウィンドウがポップアップし、ドラッグ アンド ドロップして位置を変更できることがよく見られます。 jquery を使用してドラッグ アンド ドロップを実装するには、jquery ファイルが必要です。実装手順: 1. jquery ファイルをインポート 2. js スクリプトを作成します HTML コード: コードをコピーします コードは次のとおりです: show 🎜 > Xコードをコピーします コードは次のとおりです。 <u>.win{width: 500px;高さ:600px;背景:#000000;境界半径:8px;ボックスシャドウ:0px 0px 5px 10px;不透明度:0.8;位置:絶対;左:0;上:0;表示:なし} </u>。 win .wTop{高さ:30px;幅:100%;カーソル:移動} </a>.win .content{高さ:570px;幅:100%;境界半径:5px;背景:白} </span></ style></div><div class="codebody" id="code48592"> <BR>js スクリプト: <BR><BR><BR><BR><BR>コードをコピー</div><BR><BR> コードは次のとおりです:<div class="codetitle"><span> <a style="CURSOR: pointer" data="26566" class="copybut" id="copybut26566" onclick="doCopy('code26566')"><script language="javascript" type="text/javascript"> <u>$(function(){ </u>//DragdragAndDrop(); //初期化Position</div>initPosition(); <div class="codebody" id="code26566">//クリックボタン<br>clickShowBtn(); <br>}); //マークを移動<br>var _x,_y;//コントロールの左上隅からのマウスの相対位置<br>$(".wTop").mousedown(function(e){ <br> _move =true; <br>_x=e.pageX-parseInt($(".win").css("left")); <br>_y=e.pageY-parseInt($(".win").css ("top")); <br>//$(".wTop").fadeTo(20,0.5);//クリックするとドラッグが開始され、透明に表示されます<br>}); Mousemove(function(e){ <br>if(_move){ <br>var x=e.pageX-_x;//マウス位置は、<br>var を移動するときにコントロールの左上隅の絶対位置を計算しますy=e.pageY -_y; <br>$(".win").css({top:y,left:x});//コントロールの新しい位置 <br>} <br>}).mouseup (function(){ <br>_move=false; <br>//$(".wTop").fadeTo("fast",1);//マウス ボタンを放すと移動を停止し、不透明に戻ります<br> }); <br>} <br>//ドラッグされた div の位置を初期化します<br>function initPosition(){ <br>//初期位置を計算します<br>var itop=($(document).height( )-$(".win").height())/2; <br>var ileft=($(document).width()-$(".win").width()/1.8; >//ドラッグした div の位置を設定します <br>$(".win").css({top:itop,left:ileft}) <br>} <br>//表示ボタンをクリックします<br> function clickShowBtn(){ <br>$(" #show").click(function(){ <br>$(".win").show(1000); <br>}); $("#hidden").click(function (){ <br>$(".win").hide(1000); <br>}); <br></script> ><br> <br>導入した js ファイル <br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><br> <br><script type="text/javascript" src= "js/jquery-1.10.2.min.js"></script> <br><br> </div>
