知识点总结
鼠标拖拽原理:
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 +/- 鼠标移动的距离,其他同理,关键是计算鼠标移动的距离。
滚动条拖拽:
例子一:控制物体的大小
例子二:控制文字滚动