Jqueryはカスタムwindows_jqueryのランダムなドラッグ＆ドロップを実現します

Web ページでは、ボタンをクリックするとカスタム ウィンドウがポップアップし、ドラッグ アンド ドロップして位置を変更できることがよく見られます。

jquery を使用してドラッグ アンド ドロップを実装するには、jquery ファイルが必要です。実装手順:

1. jquery ファイルをインポート

2. js スクリプトを作成します

HTML コード:

コードをコピーします コードは次のとおりです:

show 🎜 >

X

コードをコピーします

コードは次のとおりです。

.win .content{高さ:570px;幅:100%;境界半径:5px;背景:白} style>

js スクリプト:




コードをコピー

コードは次のとおりです:

dragAndDrop(); //初期化Position

initPosition();

//クリックボタン
clickShowBtn();
}); //マークを移動
var _x,_y;//コントロールの左上隅からのマウスの相対位置
$(".wTop").mousedown(function(e){
_move =true;
_x=e.pageX-parseInt($(".win").css("left"));
_y=e.pageY-parseInt($(".win").css ("top"));
//$(".wTop").fadeTo(20,0.5);//クリックするとドラッグが開始され、透明に表示されます
}); Mousemove(function(e){
if(_move){
var x=e.pageX-_x;//マウス位置は、
var を移動するときにコントロールの左上隅の絶対位置を計算しますy=e.pageY -_y;
$(".win").css({top:y,left:x});//コントロールの新しい位置
}
}).mouseup (function(){
_move=false;
//$(".wTop").fadeTo("fast",1);//マウス ボタンを放すと移動を停止し、不透明に戻ります
});
}
//ドラッグされた div の位置を初期化します
function initPosition(){
//初期位置を計算します
var itop=($(document).height( )-$(".win").height())/2;
var ileft=($(document).width()-$(".win").width()/1.8; >//ドラッグした div の位置を設定します
$(".win").css({top:itop,left:ileft})
}
//表示ボタンをクリックします
function clickShowBtn(){
$(" #show").click(function(){
$(".win").show(1000);
}); $("#hidden").click(function (){
$(".win").hide(1000);
});
>

導入した js ファイル




コードをコピー


コードは次のとおりです: