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

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

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

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

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

HTML コード:

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

<button id="show">show</button> 🎜 ><div class="win">

<div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white" id="hidden " >X





コードをコピーします

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

<style type="text/css"> .win{width: 500px;高さ:600px;背景:#000000;境界半径:8px;ボックスシャドウ:0px 0px 5px 10px;不透明度:0.8;位置:絶対;左:0;上:0;表示:なし} 。 win .wTop{高さ:30px;幅:100%;カーソル:移動} .win .content{高さ:570px;幅:100%;境界半径:5px;背景:白} </ style>

js スクリプト:




コードをコピー

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

<script language="javascript" type="text/javascript"> $(function(){ //DragdragAndDrop(); //初期化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);
});
</script> >

導入した js ファイル




コードをコピー


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


<script type="text/javascript" src= "js/jquery-1.10.2.min.js"></script>