[妙味DOM]第五课：事件深入应用

知识点总结

鼠标拖拽原理：

1、鼠标按下后开始移动，鼠标抬起停止移动，即onmousedown中要包括onmousemove和onmouseup

2、获取位置的计算：获取鼠标的当前位置－鼠标在物体中的位置（当值不变），可通过ev.clientX(鼠标到可视区) - obj.offsetLeft（物体到可视区）来计算

 

注意事项：

1、为了防止鼠标移动的过快，需要onmousemove和onmouseup前面使用document

2、因为浏览器自带有对文字移动，对你的移动产生的冲突,因此：

　　在标准浏览器下，需要阻止浏览器的默认行为，即return false;

　　在IE下，在onmousedown中使用setCapture(),获取全局捕获，在onmouseup中使用releaseCapture()，释放全局捕获。

　　setCapturn和releaseCapture只对IE有获，因此还要判断一下，即：

　　if (obj.setCapture) {

　　　　obj.setCapture();

　　}

 

 扩展：

　　限制拖拽范围和磁性吸附

 

碰撞原理：

　　采用九宫格方式，用四角来进行比较判断是否碰撞。

拖拽改变大小：

1、设定四个边的位置

2、鼠标点击判断在哪个边上

3、在右边或下边，改变宽度或高度，在左边或上边，还需要改变left和top的值，宽度变小，left变大（数值变化是相等的）

　　鼠标down下去时，要把鼠标位置、left/top值、width/height的值都保存起来。

　　鼠标移动的距离＝鼠标当前值 - 鼠标down下去保存起来的值。

　　width＝ 原始的width  +/-  鼠标移动的距离,其他同理，关键是计算鼠标移动的距离。

 

滚动条拖拽：

例子一：控制物体的大小

　　

 

 

例子二：控制文字滚动