网页拖拽事件处理流程
2017-04-13 21:18:36 0 举报
网页拖拽事件处理流程包括以下几个步骤:首先,监听鼠标按下事件,记录初始位置;然后,监听鼠标移动事件,计算鼠标移动距离;接着,监听鼠标松开事件,根据移动距离和方向更新元素位置;最后,如果元素被拖拽到目标区域,触发相应的操作。在处理过程中,可以通过事件对象获取鼠标的位置信息,以及元素的当前位置和目标位置。此外,还可以通过设置拖拽效果的参数来调整拖拽的速度和加速度。总之,网页拖拽事件处理流程是一个相对复杂的过程,需要对事件监听、位置计算和元素更新等方面有深入的了解。
作者其他创作
大纲/内容
给document添加onmouseup事件,并赋函数S
参数传入
计算可拖动的最大值,包括横向和纵向
释放鼠标停止移动
函数S
获取浏览器窗口的宽和高:winH,winW
添加函数fnMove(e,posX,posY)
计算光标位置减去距离面板边缘距离之后与浏览器窗口边缘的距离:l,t
将onmousemove与onmouseup事件赋值null
限制拖动范围
函数M
获取整个面板对象
获取标题对象
给标题区域添加onmousedown事件,并赋函数fnDown()
开始
设置拖动之前做一个判断,等于0时,强制让其等于0,大于最大值时,强制等于最大值
函数fnDown()
面板在页面中跟随鼠标移动
计算光标按下时光标和面板边缘之间的距离:disX,disY
拖拽事件步骤与思路
让面板位置跟随鼠标位置(距左为l,距顶为t)
在面板标题区域按下鼠标
给document对象添加onmousemove事件,并赋函数M
收藏
收藏
0 条评论
下一页
为你推荐
查看更多