上一篇簡單地描述了拖拽效果的實現，下面修繕出現的各種用戶體驗不好的情況：

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;
    }
  }

}