js登録を実現してウィンドウをドラッグします。
本論文の例では、js登録ドラッグ・ウィンドウを実現するための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
このケースを作る二つのポイント：
1、箱をjsで可視領域の中央に表示する
cssで箱を中に置いて表示することができますが、jsの方がいいです。
方法:
ボックスのleft値=(視認領域の幅-箱自体の幅)/2
箱のtop値=(可視領域の高さ-箱自体の高さ)/2
箱が真ん中に表示されます。
2、まずマウスを押してから、ドキュメント全体をマウスで移動すると、箱の位置がマウスに合わせて移動します。
この点に注意したい点：
1）マウスを押すと、箱X方向のマウスの位置=event.clienX-箱のoffset Left
マウスは箱のY方向の位置=event.client Y-箱のoffset Topに対して；
2）マウスが動いている時、箱のleft値=event.client X-マウスが箱X方向に対している位置
箱のtop値=event.client Y-マウスは箱のY方向の位置に対して
注意1）、2）のevent.client X/clientYは同じ値ではなく、それぞれ異なるイベントから来ています。
このケースを作る二つのポイント：
1、箱をjsで可視領域の中央に表示する
cssで箱を中に置いて表示することができますが、jsの方がいいです。
方法:
ボックスのleft値=(視認領域の幅-箱自体の幅)/2
箱のtop値=(可視領域の高さ-箱自体の高さ)/2
箱が真ん中に表示されます。
2、まずマウスを押してから、ドキュメント全体をマウスで移動すると、箱の位置がマウスに合わせて移動します。
この点に注意したい点：
1）マウスを押すと、箱X方向のマウスの位置=event.clienX-箱のoffset Left
マウスは箱のY方向の位置=event.client Y-箱のoffset Topに対して；
2）マウスが動いている時、箱のleft値=event.client X-マウスが箱X方向に対している位置
箱のtop値=event.client Y-マウスは箱のY方向の位置に対して
注意1）、2）のevent.client X/clientYは同じ値ではなく、それぞれ異なるイベントから来ています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
button {
width: 80px;
height: 30px;
display: block;
margin: 0 auto;
background-color:#3b7ae3;
border-style: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
}
.mask {
position: absolute;
top:0;
width: 100%;
height: 1000px;
background-color:black;
opacity: 0.75;
z-index: 99;
}
.login {
width: 350px;
height: auto;
border: 1px solid #fff;
position: absolute;
top:0;
left: 0;
z-index: 1000;
}
.title {
width:330px;
height: 50px;
padding-left: 20px;
line-height: 50px;
background-color: #eee;
position: relative;
cursor: move;
}
span {
position: absolute;
right:10px;
font-size: 30px;
font-weight: 300;
cursor: pointer;
}
.current {
padding: 10px 15px;
background-color: #fff;
}
.user,
.password{
margin-bottom: 10px;
}
.pt {
width:308px;
height: 40px;
padding-left: 10px;
}
.submit {
width: 320px;
height: 48px;
background-color:#3b7ae3;
color: #fff;
font-size: 16px;
border-style: none;
cursor: pointer;
}
</style>
<script>
window.onload = function(){
//
function $(id) {return document.getElementById(id);}
//
var clientwidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//
$("btn").onclick = function(){
// mask
var mask = document.createElement("div");
mask.className = "mask";
// mask
mask.style.height = clientHeight + "px";
document.body.appendChild(mask);
// login
var login = document.createElement("div");
login.className = "login";
login.id = "_login";
login.innerHTML = '<div class="title" id="_title"> '+' <span id="close">×</span>'+' </div>'+' <div class="current">'+
'<div class="user">'+' <input type="text" class="pt" placeholder=" / / ">'+
'</div>'+'<div class="password">'+'<input type="text" class="pt" placeholder=" ">'+
'</div>'+'<div>'+' <input type="button" class="submit" value=" ">'+'</div>';
document.body.appendChild(login);
// login
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
// ，login
window.onresize = function(){
if(window.innerWidth != null) // ie9+
{
clientwidth = window.innerWidth;
clientHeight = window.innerHeight;
}
else if(document.compatMode == "CSS1Compat")//
{
clientwidth = document.documentElement.clientX;
clientHeight = document.documentElement.clientY;
}
else
{
clientwidth = document.body.clientX;
clientHeight = document.body.clientY;
}
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
mask.style.height = clientHeight + "px";
}
// title
$("_title").onmousedown = function(event){
var event = event || window.event;
//
var moveX = event.clientX - login.offsetLeft;
var moveY = event.clientY - login.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
//
var clientX1 = event.clientX;
var clientY1 = event.clientY;
// = -
var loginX = clientX1 - moveX;
var loginY = clientY1 - moveY;
// login
if(loginX <= 0)
{
loginX = 0;
}
else if(loginX >= clientwidth - $("_login").offsetWidth)
{
loginX = clientwidth - $("_login").offsetWidth;
}
if(loginY <= 0)
{
loginY = 0;
}
else if(loginY >= clientHeight - $("_login").offsetHeight)
{
loginY = clientHeight - $("_login").offsetHeight;
}
$("_login").style.left = loginX + "px";
$("_login").style.top = loginY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
//
$("close").onclick = function(){
document.body.removeChild(mask);
document.body.removeChild(login);
}
}
}
}
</script>
</head>
<body>
<button id="btn"> </button>
<!-- <div class="mask" id="_mask"></div>
<div class="login" id="_login">
<div class="title" id="_title">
<span id="close">×</span>
</div>
<div class="current">
<div class="user">
<input type="text" class="pt" placeholder=" / / ">
</div>
<div class="password">
<input type="text" class="pt" placeholder=" ">
</div>
<div >
<input type="button" class="submit" value=" ">
</div>
</div> -->
</div>
</body>
</html>