拖拽相关问题

上一篇简单地描述了拖拽效果的实现，下面修缮出现的各种用户体验不好的情况：

1.cursor: move -- 被拖拽的元素出现移动标志

2.被拖拽的元素一定要设置：position:absolute

3.溢出窗口

4.拖拽时将滚动条隐藏

5.低版本火狐，当被拖拽的元素无内容时会出现不可用的bug

 //跨浏览器获取窗口大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
     if(document.compatMode == 'CSS1Compat'){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
      }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
      }
 }
pox.onmousedown = function(e){
    var e = e || window.event;
    preDef(e);  //低版本火狐，当被拖拽的块是空白时出现bug

    document.documentElement.style.overflow = 'hidden'; //此举作用是：当拖拽时滚动条隐藏
    var diffX = e.clientX - pox.offsetLeft;
    var diffY = e.clientY - pox.offsetTop;
    document.onmousemove = function(e){
        var e = e || window.event;
        var lefts = e.clientX - diffX;
            var tops = e.clientY - diffY;
        if(lefts<0){
            lefts = 0;
        }else if(lefts > pageWidth - pox.offsetWidth){
            lefts = pageWidth - pox.offsetWidth;
        }
                    
        if(tops<0){
            tops = 0;
        }else if(tops > pageHeight - pox.offsetHeight){
            tops = pageHeight - pox.offsetHeight;
        }

        pox.style.left = lefts + 'px';
        pox.style.top = tops + 'px';
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
         }
}
//阻止默认行为
function preDef(e){
        var e = e || window.event;
    if(typeof e.preventDefault != 'undefined' ){
        e.preventDefault();
    }else {
        e.returnValue = false;
    }
  }

}