JavaScript限定范围拖拽及自定义滚动

学习笔记：
拖拽div要发生三个事件：

1. 鼠标按下onmousedown;
2. 鼠标移动onmousemove;
3. 鼠标松开onmouseup;

注意事项：
（1）要防止div移出可视框，要限制div移动的横纵坐标；
（2）防止火狐的bug, 要在最后写上return false，阻止默认事件；
（3）防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;

1. 实例一

两个对象：div1 和 div2，其中div1是div2的父元素，div2只能在div1的范围内拖拽

image.png

2. 实例二

基于上述原理，我们来做一个自定义滚动条，通过拖拽滚动条的位置来控制另一个对象的大小，比如一幅图。

image.png

image.png

 
 
 


 

 

 
 

 ![](https://timgsa.baidu.com/141128%2F201411281041075742.jpg)
 
 

3. 更多相关文章

1. js中event对象详解
2. offsetTop、clientTop、scrollTop、offsetTop各属性介绍
3. js实时获取鼠标所在坐标