好资源导航 » 文章资讯 » JavaScript实现拖拽盒子效果

JavaScript实现拖拽盒子效果

2023-08-02 01:44:04 522

本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码，供大家参考，具体内容如下

实现效果：

1.单击关闭，关闭盒子
2.点击左上方‘点击注册'，打开盒子
3.鼠标放在盒子上方蓝色区域显示十字
4.点击鼠标不松开就可移动盒子
5.松开鼠标图片暂停

实现步骤：

1.在页面最上方设置一个盒子，里面有一个超链接，超链接里面设置href="javascript:void(0);"，再点击时不打开网页。

2.再设置一个可以拖拽的盒子，盒子嵌套一个蓝色盒子为的最上方的蓝色区域，蓝色盒子里面两个span标签，里面写‘关闭'和‘可拖拽'。

3.给‘关闭'的盒子注册点击事件，点击后，拖拽盒子样式为none，(不显示)
给最上方的超链接设置点击事件，点击后，拖拽盒子样式为block，(显示)

4.给上方蓝色盒子设置onmousedown(鼠标点击事件)，同时获取鼠标点击位置
离拖拽盒子的距离，为mouseLeft和mouseTop

5.给页面（document）设置onmousemove事件让鼠标的位置分别减去mouseLeft和mouseTop，得到盒子左上角随鼠标移动的坐标，再将坐标赋值给拖拽盒子

6.最后设置onmouseup事件，鼠标松开时页面不移动。即document.onmousemove= null

实现细节：

1.让拖拽盒子居中显示：top:50%; left:50%;
margin-left:-155px; margin-top:-155px;
(margin-left:-(盒子宽度的一半);这里盒子宽度300px边框为5px,总宽度310px，
所以设置-155px，margin-top:-(盒子高度的一半)，和宽度同理）

2.varevt=event||window.event;兼容性写法。

代码：




拖拽盒子

*{
margin:0px;
padding:0px;
}
.dropBox{
width:300px;
height:300px;
top:50%;
left:50%;
margin-left:-155px;
margin-top:-155px;
display:block;
border:5pxsolid#aaa;
position:absolute;
}

.nav{
width:100%;
height:30px;
background-color:blue;
opacity:0.6;
}
.nava{
font-size:15px;
color:white;
}
.dropBox.box{
width:300px;
height:30px;
position:absolute;
left:0px;
top:0px;
background-color:darkblue;
opacity:0.8;
cursor:move;
}
.close{
float:right;
color:white;
font-size:15px;
cursor:pointer;
}
.move{
color:white;
font-size:15px;
}


function$(id){
returndocument.getElementById(id);
}
window.onload=function(){
varregister=$('register');
vardropBox=$('dropDiv');
varbox=$('box');
varbox2=$('box2');
box2.onclick=function(){
dropBox.style.display='none';
}
register.onclick=function(){
dropBox.style.display='block';
}
box.onmousedown=function(event){
varevt=event||window.event;
varmouseLeft=evt.clientX-dropBox.offsetLeft;
varmouseTop=evt.clientY-dropBox.offsetTop;
document.onmousemove=function(event){
varevt=event||window.event;
varx=evt.clientX-mouseLeft;
vary=evt.clientY-mouseTop;
dropBox.style.left=x+155+'px';
dropBox.style.top=y+155+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
}
}

}







点击注册

注册信息（可以拖拽）【关闭】

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现拖拽盒子效果

热门推荐

随机推荐