JavaScript实现拖动对话框效果的实现代码

第JavaScript实现拖动对话框效果的实现代码metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

margin:0;

top:0;

.login-btn{

width:50px;

height:50px;

line-height:50px;

font-size:16px;

text-align:center;

margin:100pxauto;

background-color:#1E1E1E;

color:white;

border-radius:50%;

.login-btn:hover{

cursor:pointer;

background-color:#323233;

box-shadow:3px3px10pxrgba(0,0,0,.3);

.bg{

display:none;

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

background-color:rgba(0,0,0,.4);

.login{

display:none;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:300px;

height:200px;

background-color:#1E1E1E;

box-shadow:4px4px15pxrgba(0,0,0,.3);

.hd{

position:relative;

width:100%;

height:26px;

background-color:#323233;

.hd:hover{

cursor:move;

.close{

position:absolute;

top:3px;

right:5px;

width:20px;

height:20px;

background-color:red;

text-align:center;

line-height:20px;

border-radius:50%;

box-shadow:005pxrgba(0,0,0,.7)inset;

.close:hover{

background-color:yellow;

cursor:pointer;

/style

/head

body

div点击/div

div/div

div

div

div×/div

/div

/div

script

//获取元素

varbtn=document.querySelector('.login-btn');

varbg=document.querySelector('.bg');

varlogin=document.querySelector('.login');

varclose=document.querySelector('.close');

varhd=document.querySelector('.hd');

//按下btn，弹出对话框

btn.addEventListener('click',function(){

bg.style.display='block';

login.style.display='block';

//按下close，关闭对话框

close.addEventListener('click',function(){

bg.style.display='none';

login.style.display='none';

hd.addEventListener('mousedown',function(e){

//鼠标按下对话框顶部时，获取鼠标到对话框的距离

varx=e.pageX-login.offsetLeft;

vary=e.pageY-login.offsetTop;

//鼠标按下并移动时，实时更新对话框的位置

document.addEventListener('mousemove',move);

functionmove(e){

login.style.left=e.pageX-x+'px';

login.style.top=e.pageY-y+'px';

//鼠标松开时，移除拖拽的动作

document.addEventListener('mouseup',function(){

document.removeEventListener('