目录
- 一、需求场景描述
-
- 1.需求分解
- 二、关键技术点提前知
-
- 技术点1：鼠标的点击事件
- 技术点2：对html盒子属性pageX|Y,offsetLeft|Top
- 三、实现思路分析
-
- 1.数据初始化处理
- 2.鼠标点击，持续移动，鼠标弹起
- 四、完整 demo 示例代码
一、需求场景描述
1.需求分解：实现同一页面双窗口，对右侧窗口滚动，实现对应节点跟随。
二、关键技术提前知
技术点1：鼠标点击事件
.click：在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考虑，让键盘和鼠标都可以触发 onclick 事件处理程序。
dblclick：在用户双击鼠标主键（通常是左键）时触发。这个事件不是在 DOM2 Events 中定义 的，但得到了很好的支持，DOM3 Events 将其进行了标准化。
mousedown：在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。
mouseenter：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseenter 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events 中新增的事件。
mouseleave：在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在 光标经过后代元素时触发。mouseleave 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events 中新增的事件。
mousemove：在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。
mouseout：在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。
mouseover：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。
mouseup：在用户释放鼠标键时触发。这个事件不能通过键盘触发。页面中的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave，所
技术点2：pageX|Y ,offsetLeft|Top
2.在页面没有滚动时，pageX 和 pageY 与 clientX 和 clientY 的值相同。客户端坐标是事件发生时鼠标光标在客户端视口中的坐标，clientX 和 clientY可以获取。而页面坐标是事件发生时鼠标光标在页面上的坐标，通过 event 对象的 pageX 和 pageY 可以获取。这两个属性表示鼠标光标在页面上的位置，offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角距离浏览器左侧和顶部的距离。
三、实现思路分析
- 定义一个变量drag 用来保存当前盒子是否处于点击状态，用于是否执行监听方法。定义变量pontX|Y 保存当前鼠标的位置，offsetLeft|offsetY 用于保存当前盒子处于浏览器的位置。鼠标点击的时候保存鼠标位置，并赋值持续点击和弹起监听方法，在持续移动的方法中，通过移动后盒子的位置-移动前盒子的位置+鼠标当前的位置 并给盒子赋值像素值，由此实现了移动效果。
四、完整 demo 示例代码
``
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<div class="wrap"></div>
</div>
</body>
</html>
<script>
const wrap=document.querySelector('.wrap')
let pointX=0
let pointY=0
let boxL=0
let boxT=0
let drag=false
wrap.onmousedown=function(event){
drag=true
pointX=event.pageX;
pointY=event.pageY;
boxL=wrap.offsetLeft;
boxT=wrap.offsetTop;
wrap.onmousemove=mouseMove
wrap.onmouseup=mouseUp
}
function mouseMove(event){
if(!drag) return
let curLeft=event.pageX-pointX+boxL;
let curTop=event.pageY-pointY+boxT;
wrap.style.left=curLeft+'px';
wrap.style.top=curTop+'px';
}
function mouseUp(){
drag=false
wrap.onmousemove=null
wrap.onmouseup=null
}
</script>
<style>
.content{
width: 100%;
height: 100vh;
position: relative;
}
.wrap{
width: 300px;
height: 300px;
position:absolute ;
left: 100px;
top:100px;
background: pink;
}
</style>
