这篇文章主要介绍“怎么用JavaScript实现简单的拖拽效果”，在日常操作中，相信很多人在怎么用JavaScript实现简单的拖拽效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JavaScript实现简单的拖拽效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
1.先搭架子：
计算
安全
数据库
网络和加速
企业服务
* {
margin: 0;
padding: 0;
}
p {
background: skyblue;
text-align: center;
}
html,
body {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
display: none;
}
.login {
width: 400px;
height: 300px;
background: purple;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
cursor: move;
}
.login>span {
display: inline-block;
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 0;
}<p>我是p标签</p>
<a href="http://www.baidu.com" >官网</a>
<div class="mask"></div>
<div class="login">
<span></span>
</div>
2.逻辑部分
//1.拿到需要操作的元素
const oP = document.querySelector("p");
const oMask = document.querySelector(".mask");
const oLogin = document.querySelector(".login");
const oClose = oLogin.querySelector(".login>span");
// console.log(oClose);
//2.监听点击事件
oP.onclick = function() {
oMask.style.display = "block";
oLogin.style.display = "block";
};
oClose.onclick = function() {
oMask.style.display = "none";
oLogin.style.display = "none";
};
//3.监听登录框的按下和移动事件
oLogin.onmousedown = function(e) {
e = e || e.window;
//1.计算固定不变的距离
const x = e.pageX - oLogin.offsetLeft;
const y = e.pageY - oLogin.offsetTop;
// console.log(x);
//2.监听移动事件
oLogin.onmousemove = function(e) {
e = e || e.window;
//3.计算移动之后的偏移位
let offsetX = e.pageX - x;
let offsetY = e.pageY - y;
//4.重新设置登录框的位置
oLogin.style.left = offsetX + 'px';
oLogin.style.top = offsetY + 'px';
};
};
oLogin.onmouseup = function() {
oLogin.onmousemove = null;
};
到此，关于“怎么用JavaScript实现简单的拖拽效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
