DOM事件 --鼠标拖拽div


实现效果:

DOM事件 --鼠标拖拽div_第1张图片


分析:

1.当鼠标在粉色div上按下时,捕获onmousedown事件,获取鼠标的坐标clientX,clientY

2.鼠标在按下后移动,整个div跟随着移动,获取鼠标按下时相对于整个div的坐标,即下图中的disx,dixy

3.鼠标抬起后,整个div不再随鼠标移动,onmouseup事件

4.设置整个div能够活动的范围,即浏览器窗口大小减去div本身所占大小


DOM事件 --鼠标拖拽div_第2张图片


具体代码:




	
	
	




你可能感兴趣的:(javascript)