原生js实现拖拽
程序员文章站
2022-07-14 16:43:10
...
1. 预备知识
-
offsetTop/offsetLeft：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。 -
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop
作用：浏览器无法显示的部分（被卷去的部分）。 -
clientY/clientX:
调用者：event.clientX/clientY
作用：鼠标距离浏览器可视区域的距离（左、上）。 -
pageY/pageX:
调用者：event.pageX/pageY
作用：获取鼠标位于整个网页页面的顶部和左侧部分的距离。（页面） -
screenY/screenX:
调用者：
作用：获取鼠标位于屏幕的上方和左侧的距离。（屏幕） -
clientX/clientY:
调用者：event.clientX/clientY
作用：获取鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
其中：pageY和pageX的兼容写法：
在页面位置就等于 = 看得见的（当前浏览器）+ 看不见的（被卷去的）
即pageY/pageX = event.clientY/clientX + scroll().top/scroll().left
2. 实现拖拽
拖拽过程中依次触发的事件：mousedown、mousemove、mouseup
- 在鼠标点击（
mousedown）的那一瞬间，获取到鼠标在盒子中的相对位置（一旦mousedown就是固定的值）； - 然后在鼠标点击并移动（
mousemove）的过程中，这时鼠标在页面中的位置随之改变，获取位置，并减去鼠标在盒子中的位置，获取到了盒子此时应该在网页中的位置，但是最后将该位置值赋给盒子就可以实现盒子的移动了； - 当鼠标弹起（
mouseup），要对mousemove
完整的实现代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
}
.nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none;
}
.d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：在指定位置按住鼠标左键移动对话框。
//分析：鼠标按下，触动事件，移动再更换对话框的位置。
//鼠标按下onmousedown 鼠标弹起:onmouseup 鼠标移动onmousemove
//步骤：
//1.老三步和新五步
//2.把鼠标的坐标赋值给对话框。
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//1.老三步和新五步
//先按下，再移动触动此事件
drop.onmousedown = function (event) {
// 获取鼠标在盒子中的坐标（只要点击后就是固定的值），将来移动的时候减去保证鼠标在盒子的指定位置
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop;
// 2.把鼠标的坐标赋值给对话框。
document.onmousemove = function (event) {
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠标位置 减去鼠标在盒子中的坐标，得到盒子应该在网页中的位置（动态的）
xx = xx - x;
yy = yy - y;
//给box赋值，确定盒子跟着鼠标走
box.style.left = xx + "px";
box.style.top = yy + "px";
//禁止文本选中（选中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
};
//事件解绑
drop.onmouseup = function () {
//解绑
document.onmousemove = null;
}
}
</script>
</head>
<body>
<!--顶部注册部分，无用-->
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<!--我们移动的对话框-->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注册信息 (可以拖拽)</i>
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
下一篇： DIV 切换(二)