<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> landing Page Drag-and-drop function realization </title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
a{
Text-decoration:none;
}
. dialog{
width:380px;
Height:auto;
position:fixed;
z-index:1000;
border:1px solid #d5d5d5;
Background-color: #fff;
Display:none;
}
. diatitle{
height:48px;
line-height:40px;
Text-align:center;
Color: #535353;
Background-color: #f5f5f5;
}
. diacontent{
padding:15px 20px;
}
. close{
font-size:20px;
Float:right;
margin-right:20px;
}
#txt {
width:100%;
height:40px;
border:1px solid #ccc;
margin-bottom:10px;
}
#pwd {
width:100%;
height:40px;
border:1px solid #ccc;
margin-bottom:10px;
}
#btn {
Display:block;
width:80px;
height:40px;
margin:0 Auto;
Background-color: #CCCCCC;
Border:none;
Outline-style:none;
}
. mask{
Background-color: #000000;
opacity:0.4;
Filter:alpha (OPACITY=40);
z-index:900;
position:fixed;
top:0px;
left:0px;
Display:none;
}
</style>
<body style= "height:1500px" >
<div class= "Dialog" id= "dialog" >
<div class= "Diatitle" id= "Diatitle" >
Landing page
<a href= "#" class= "Close" >×</a>
</div>
<div class= "diacontent" id= "Diacontent" >
<form action= "Fsaf" method= "POST" >
<input type= "text" name= "" id= "txt" placeholder= "Please enter account"/>
<input type= "password" name= "" id= "pwd" placeholder= "Please enter password"/>
<div id= "" style= "TEXT-ALIGN:RIGHT;FONT-SIZE:12PX;" >
<a href= "#" > Forgot password </a>
</div>
<input type= "button" name= "" id= "btn" value= "Login"/>
<div id= "" style= "TEXT-ALIGN:RIGHT;FONT-SIZE:12PX;" >
<a href= "#" > Register now </a>
</div>
</form>
</div>
</div>
<div class= "Mask" >
</div>
<div id= "Login" >
Click to eject the landing layer
</div>
</body>
<script type= "Text/javascript" >
Window.onload=function () {
var close=document.getelementsbyclassname ("Close") [0];
var Dialog=document.getelementbyid ("dialog");
var Diatitle=document.getelementbyid ("Diatitle");
var Diacontent=document.getelementbyid ("Diacontent");
var mask=document.getelementsbyclassname ("Mask") [0];
var Isdraging=false; Whether the tag can be dragged
Diatitle.onmousedown=down;
Document.onmousemove=move;
Document.onmouseup=up;
var Login=document.getelementbyid ("Login");
Login.onclick=function () {
dialog.style.display= "Block";
mask.style.display= "Block";
}
Auto Center-landing floating layer
Close.onclick=function () {
Dialog.style.display= "None";
Mask.style.display= "None";
}
Center of landing Layer
AutoCenter ();
function AutoCenter () {
var bodyw = document.documentElement.clientWidth;
var bodyh = document.documentElement.clientHeight;
var ElW = dialog.offsetwidth;
var ElH = dialog.offsetheight;
Dialog.style.left = ((BODYW-ELW)/2-190) + ' px ';
Dialog.style.top = ((BODYH-ELH)/2-80) + ' px ';
}
Mask Layer
Filltobody ();
function Filltobody () {
Mask.style.width = document.documentElement.clientWidth + ' px ';
Mask.style.height = document.documentElement.clientHeight + ' px ';
}
Press the
function down () {
Diatitle.style.cursor= "Move";
Isdraging=true;
Objleft=dialog.offsetleft;
Objtop=dialog.offsettop;
PosX = parseint (MousePosition (event). x)
PosY = parseint (MousePosition (event). Y);
Offsetx=posx-objleft;
Offsety=posy-objtop;
}
Move
function Move (event) {
if (isdraging = = True) {
var x=mouseposition (event). X-offsetx;
var y=mouseposition (event). Y-offsety;
var w = document.documentelement.clientwidth-dialog.offsetwidth;
var h = document.documentelement.clientheight-dialog.offsetheight;
X=math.min (W,math.max (0,x));
Y=math.min (H,math.max (0,y));
Dialog.style.left = x + ' px ';
Dialog.style.top = y + ' px ';
}
}
Loosen
function up () {
Isdraging= false;
}
function MousePosition (evt) {
var xPos, YPos;
EVT = EVT | | window.event;
if (Evt.pagex) {
XPos = Evt.pagex;
YPos = Evt.pagey;
} else {
XPos = Evt.clientx + document.body.scrollleft-document.body.clientleft;
YPos = Evt.clienty + document.body.scrolltop-document.body.clienttop;
}
return {
X:xpos,
Y:ypos
}
}
}
</script>
JS implementation of landing page drag and drop function