简介：最近做项目一直用vue框架，碰上了一些需要直接操作dom的情况，但是vue是数据驱动的框架，对于dom操作很弱，一个ref还不能操作组件中的dom，最后研究了一番发现dom可以直接操作，而且更简单。真是用多了框架把最原始最强大的方法都丢了。先来几个知识点铺垫然后做两个关于鼠标拖动的例子。
一：重视起来id
以前总是用jq，id都是用来定位元素的，但仅仅这么用就让费id的本质了，id是dom对象的入口，所有写在dom元素中的属性都可以用id来获取；
比如dom中的style属性用
<div id="box" style="height:100px;width:100px"></div>
```
```
id.style.width 就能获取到相应的值
```
除了这些添加上去的属性 还有很多方法（回调函数）也可以通过id进行绑定
```
<div id="box" onclick="myonclick()"></div>
#给div绑定了一个点击事件
#也可以在js中这么写
id.onclick = function(){}
```
总结:id是dom元素对象，可获取或者定义dom元素的属性或者方法
#####二：各种位置
在‘id’的回调事件函数中总有个event对象参数，这个对象玄机很深，只说关于位置的两个属性
1. **event.clientX、event.clientY**
鼠标相对于[浏览器](http://www.2cto.com/os/liulanqi/)窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
2. **event.offsetX、event.offsetY**
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
3. **id对象的位置参数**
id.offsetTop对于父元素（position：absolute或relative）上边缘的像素位置
id.offsetLeft对于父元素（position：absolute或relative）左边缘的像素位置
都是像素为单位的整形数
列：计算div坐标点
```
var baseY = ev.clientY-ev.offsetY;
var baseX = ev.clientX-ev.offsetX;
//或者
var baseY = ev.clientY-id.offsetTop;
var baseX = ev.clientX-id.offsetLeft;
//注 id指的是id那个名字
```
######三：各种id回调事件
1. onmousedown
按下鼠标时候会调用该回调函数
2. onmouseup
松开鼠标时候
3. onmousemove
鼠标滑动的时候
该回调函数是个关于过程的函数，在整个鼠标移动的时候该函数一直有效，所以这个函数中的参数event的clientX,clientY会根据实际位置实时改变
4. onmouseout
鼠标超出元素的时候
######四：实例1 点击拖动实例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击拖动</title>
</head>
<body>
<div id="box" style="position:absolute;background: #888;width: 500px;height:300px;top:100px;left:100px">
<div id="inbox" style="position:absolute;background: orange;width: 50px;height: 50px;top:10px">
拖动我
</div>
</div>
<script>
// box.onclick = function(){
// console.log(box.offsetWidth)
// }
inbox.onmousedown = function(event){
var basex = event.clientX-inbox.offsetLeft; //计算client初始位置x
var basey = event.clientY-inbox.offsetTop; //计算client初始位置y
var maxpointx = basex+(box.offsetWidth-inbox.offsetWidth) //最大值坐标 id.offsetWidth 获取宽度值 可以直接计算
var maxpointy = basey+(box.offsetHeight-inbox.offsetHeight)
// console.log(basex,basey);
// 移动事件
box.onmousemove = function(event){
// 计算边界 防止超出边界
if(event.clientX<basex){
posx = basex
}else if(event.clientX>maxpointx){
posx = maxpointx
}else{
posx = event.clientX
}
if(event.clientY<basey){
posy = basey
}else if(event.clientY>maxpointy){
posy = maxpointy
}else{
posy = event.clientY
}
var l = posx-basex; //计算clientx 差值
var t = posy-basey; //计算clienty 差值 差值即
inbox.style.left = l+"px";
inbox.style.top = t+"px";
}
}
// 鼠标弹起事件
inbox.onmouseup = function(ev){
box.onmousemove = null;
box.onmouseup=null;
}
// 超出事件
box.onmouseout = function(){
box.onmousemove = null;
box.onmouseup=null;
}
</script>
</body>
</html>
```
#####五:实例2 点击拖动滚动实例
图片在含有滚动条的div里 点击拖动 实现拖动浏览
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击拖动滚动</title>
</head>
<body>
<div id="box" style="height:300px;width: 400px;border: 1px solid red;position: absolute;top:20px;left:20px;overflow: scroll;">
<div style="width: 800px;height: 600px">
</div>
</div>
<script>
box.onmousedown=function(event){
var basex = event.clientX;
var basey = event.clientY;
var scrollLeft = box.scrollLeft;
var scrollTop = box.scrollTop;
box.onmousemove = function(event){
var movex = basex - event.clientX;
var movey = basey - event.clientY ;
box.scrollLeft = scrollLeft+movex;
box.scrollTop = scrollTop+movey;
}
}
box.onmouseup = function(){
box.onmousemove=null;
}
box.onmouseout = function(){
box.onmousemove=null;
}
</script>
</body>
</html>
```
总结：例1是根据原始坐标计算left和top值 而例2是根据相对坐标计算scrollLeft和scrollTop应该滚动多少 个原理不同但所用知识点完全相同
网友评论