月度归档:2 月 2014

原生Javascript拖放程序

自己造轮子写个原生拖放,要做到简单调用,考虑拖放对象所在的环境,还要兼容老IE,还是挺锻炼人的。
主要碰到几个问题:

  1. 关于冒泡和阻止默认事件,以前的理解都很粗略,自己写的时候才知要细分。
    一是要阻止事件传递,即事件冒泡,老IE里是ev.cancelBubble=true,其他浏览器是ev.stopPropagation(),要在onmousedown的时候就定义好;
    然后是阻止默认事件,主要是为了防止图片无法拖动的问题,要在onmousemove的时候,老IE里是ev.returnValue=false; 其他浏览器ev.preventDefault()
  2. 拖动过程中鼠标移出物件,就要把事件方法在document上复制一遍:document.onmousemove=_self.onmousemove; 并且考虑到拖放结束的时候鼠标可能是在任意位置,那就干脆把onmouseup方法写在document上
  3. 单纯的拖放物件其实没什么用,实际应用的时候肯定会给拖放增加范围,比如自制的滚动条,幻灯效果等。所以给拖放对象的父级元素作边界。于是又重温了各种位置取值的兼容问题,getBoundingClientRect()是一个很有用的函数,不过在老IE里面取不到宽高,所以要自己计算一下。

查看详细 »