首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS简易拖拽成效

2012-10-15 
JS简易拖拽效果模仿《javascript权威指南》写了个简易拖拽程序,麻雀虽小五脏俱全。原理:注册mousemove事件,使

JS简易拖拽效果
模仿《javascript权威指南》写了个简易拖拽程序,麻雀虽小五脏俱全。
原理:注册mousemove事件,使元素跟随鼠标挪动;注册mouseup事件,移除mousemove事件,使得松开鼠标时元素不再跟随移动,能够固定在指定位置。在mousedown事件中注册mousemove事件和mouseup事件,这样便可完成一次完整的拖拽。

重点:IE中setCapture()的应用。它的作用是捕捉所有的MouseEvent,设置完成后,即使鼠标移出窗口注册的鼠标事件仍然能够被触发。它在此处的作用是当鼠标移动过快越出元素的边界使得原本将要失效的mousemove事件依然能够发挥作用。在ff和chrome中,由于没有对应的设置,可以把mousemove和mouseup事件指定到docuemnt对象上,这样不管鼠标怎么移动,都在document上;其实在ie上这么写也行,那就不用设置setCapture()了,它和设置了的相比唯一的区别是当元素向右移出窗口边界时,元素始终保持在可视范围内。


当然此例还可以扩展,比如限定拖拽范围不允许移动到可视范围外等,只要修改mousemove方法即可。

热点排行