js实现模态框的拖拽效果
本文实例为大家分享了js实现模态框拖拽效果的具体代码，供大家参考，具体内容如下
之前学习js遇到了这样的需求：
鼠标按下后，移动鼠标，模态框随鼠标移动，鼠标松开，模态框也不会随鼠标移动。<完整的代码在最后哦>
分析思路：
1.点击弹出层，模态框和遮挡层就会显示出来。display：block
2.点击关闭按钮，模态框和遮挡层就会隐藏。display：none
3.在页面中拖拽的步骤：鼠标按下并移动，之后松开鼠标
4.触发事件是鼠标按下mousedown，鼠标移动是mousemove，鼠标松开：mouseup
5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了
6.鼠标按下触发的时间源是最上面一行，也就是说，鼠标只有放在最上面一行，才能触发该事件。放在其他区域不会触发该事件。
7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。（因为模态框是可移动的，只有第一次才能拿到模态框的left和top，其他时候并不能直接拿到。所以采用‘鼠标的坐标 - 鼠标在模态框内的坐标’来计算模态框的位置）
8.鼠标按下，我们要得到鼠标在盒子内的坐标
9.鼠标移动，就让模态框的坐标设置为：鼠标坐标 - 盒子坐标即可。注意移送事件要写到按下事件里面
10.鼠标松开，就停止拖拽，可以让鼠标移动事件解除
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}
#link {
color: #000;
text-decoration: none;
border: 1px solid #000;
}
.login {
width: 300px;
height: 200px;
background-color: antiquewhite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: none;
}
.login-title {
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
background-color: aqua;
cursor: move;
}
.login-title span {
display: block;
height: 30px;
width: 30px;
background-color: antiquewhite;
line-height: 30px;
border-radius: 50%;
position: absolute;
top: -10px;
right: -10px;
font-size: 12px;
}
.login-title span a {
text-decoration: none;
color: #000;
}
.login-input-content {
margin: 15px 20px 0;
line-height: 30px;
}
.login-button {
width: 200px;
height: 20px;
margin: 10px auto;
border: 1px solid rgb(77, 73, 73);
text-align: center;
}
.login-button a {
text-decoration: none;
color: #000;
font-size: 14px;
}
#bg {
display: none;
background-color: #000;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="login-header"><a href="javascript:;" rel="external nofollow" id="link">点击，弹出登录框</a></div>
<div class="login" id="login">
<div class="login-title">登录会员
<span><a id="colseBth" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label for="">用 户 名：</label>
<input type="text" placeholder="请输入用户名" name="info[sername]" id="username" class="username">
</div>
<div class="login-inpit">
<label for="">登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password">
</div>
</div>
<div class="login-button" id="loginBtn"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="login-button-submit">会员登录</a></div>
</div>
<!-- 遮罩层 -->
<div class="login-bg" id="bg"></div>
</body>
<script>
// 1.点击,弹出模态框和遮罩层
// 3.点击关闭模态框和遮罩层自动隐藏
// 4.页面拖拽原理：鼠标按下且移动，之后松开鼠标
// 5.拖拽过程：鼠标移动的时候获得新的值赋值给模态框的left和top值。
//1.获取DOM元素
var oLink = document.querySelector('#link');
var oLogin = document.querySelector('.login');
var oBg = document.querySelector('#bg');
var oClose = oLogin.querySelector('#colseBth');
var title = oLogin.querySelector('.login-title');
//2.点击弹出层这个链接link，让mask和login显示出来
oLink.addEventListener('click', function () {
oLogin.style.display = 'block';
oBg.style.display = 'block';
})
//3.点击closeBtn就隐藏mask和login
oClose.addEventListener('click', function () {
oLogin.style.display = 'none';
oBg.style.display = 'none';
})
//4.开始拖拽
//（1）当我们鼠标按下，就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - oLogin.offsetLeft;
var y = e.pageY - oLogin.offsetTop;
console.log(x, y)
//（2）鼠标移动的时候，把鼠标在页面中的坐标 减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
oLogin.style.left = e.pageX - x + 'px';
oLogin.style.top = e.pageY - y + 'px';
}
//(3)鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现模态框拖拽效果
在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
-
JavaScript实现可拖动模态框
本文实例为大家分享了JavaScript实现可拖动模态框的具体代码,供大家参考,具体内容如下 代码: HTML代码部分: <style> * { margin: 0px; padding: 0px; } .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; cursor: pointer; } .login { display: none; width
-
js实现拖动模态框
模态框,我们也叫弹出框,可以在网易云,京东等之类的网页中看到. 效果如下: 代码思路: 1．点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层. 2．点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3．鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4．鼠标松开,可以停止拖动模态框移动. 5.在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标 6.触发事件是鼠标按下mousedown,鼠标移动mousemove鼠标松开mouseup 7.拖拽过程:鼠标移动过程中,
-
js实现模态框的拖拽效果
本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou
-
bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个 拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
-
js实现登录框鼠标拖拽效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
-
js实现弹出框的拖拽效果实例代码详解
具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&
-
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&qu
-
js实现百度登录框鼠标拖拽效果
以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
-
js实现本地图片文件拖拽效果
如何拖拽文件到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height:
-
js实现百度登录窗口拖拽效果
前言 在我们使用百度相关的功能网页的时候,我们要去登录账号.但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; heig
-
JS实现模态框拖拽动态效果
本文实例为大家分享了JS实现模态框拖拽的具体代码,供大家参考,具体内容如下 在实现这个案例效果首先我们了解几个属性,offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了… 分别解释一下: 1.offsetLeft:指的是返回一个带有定位父元素左边偏移量的值,当然如果需要操作的元素的父元素没有定位,那么它返回的就是距离浏览器最左侧页面的距离.2.offsetTop:指的是返回一个带有定位父元素顶部偏移量的值,当然如果需要操作的元素的父元素没有定位