跨IE、FireFox的鼠标选框表现（仿Vista）-优快云博客

本文介绍了一种在网页上实现拖拽选择框的方法。通过JavaScript动态调整div元素的位置和大小，用户可以在页面上自由绘制选择区域。此功能兼容HTML与XHTML，在不同浏览器环境下进行了适配。

同时也兼容HTML与XHTML

由于Firefox下，body中没有内容，所以网页高度为0，看不到效果的，要在FF下看效果的朋友请在body中自行加入内容

<html>
<head>
<script>
var _isDrag = false;
var _dragObj;
var _x,_y;
var _scrollLeft,_scrollTop;
function clickDIV(e){
    var _event = e || window.event;
    
    _dragObj = document.getElementById("dragDivId");
    _dragBg = document.getElementById("dragDivBg");
    
    _scrollLeft = document.compatMode == "CSS1Compat" ? document.documentElement.scrollLeft : document.body.scrollLeft;
    _scrollTop = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop : document.body.scrollTop;
    _x = _scrollLeft + _event.clientX;
  _y = _scrollTop + _event.clientY;
  
  _dragObj.style.fontSize = "0px";
  _dragObj.style.display = "block";
  _dragObj.style.left = _x + "px"; 
  _dragObj.style.top = _y + "px";
  _dragObj.style.borderColor = "#3399ff";
  _dragObj.style.borderWidth = "1px"; 
  _dragObj.style.borderStyle = "solid";
  _dragObj.style.width = "0px";
  _dragObj.style.height = "0px";    
  
  _dragBg.style.backgroundColor = "#78b4f0";
  _dragBg.style.filter = "alpha(opacity=55)";
  _dragBg.style.opacity = "0.55";
  _dragBg.style.width = "0px";
  _dragBg.style.height = "0px";
  
    _isDrag = true;
    
    if(document.addEventListener){
        document.addEventListener("mousemove",dragDiv,false);
        document.addEventListener("mouseup",unclickDIV,false);
    }else{
        document.attachEvent("onmousemove",dragDiv);
        document.attachEvent("onmouseup",unclickDIV);
      _dragBg.setCapture();
    }
}
   
function dragDiv(e){
    if(_isDrag){
      var _event = e || window.event;
      var _divWidth = _scrollLeft + _event.clientX - _x;
      var _divHeight = _scrollTop + _event.clientY - _y;
      
      if(_divWidth < 0){
            _dragObj.style.left = _scrollLeft + _event.clientX + "px";
      }else{
            _dragObj.style.left = _x + "px";
      }
      if(_divHeight < 0){
            _dragObj.style.top = _scrollTop + _event.clientY + "px";
      }else{
            _dragObj.style.top = _y + "px";
      }
      
      _dragObj.style.width = Math.abs(_divWidth) + "px";
      _dragBg.style.width = Math.abs(_divWidth) + "px";
      _dragObj.style.height = Math.abs(_divHeight) + "px";
      _dragBg.style.height = Math.abs(_divHeight) + "px";
    }
}

function unclickDIV(e){
    _isDrag = false;
    _dragObj.style.display="none";
    if(document.removeEventListener){
        document.removeEventListener("mousemove",dragDiv,false);
        document.removeEventListener("mouseup",unclickDIV,false);
    }else{
        _dragBg.releaseCapture();
    }
}

window.onload = function(){
    var _divSelect = document.createElement("div");
    _divSelect.setAttribute("id","dragDivId");
    _divSelect.style.cssText="position:absolute;display:none;z-index:10";
    document.body.appendChild(_divSelect);
    var _divBg = document.createElement("div");
    _divBg.setAttribute("id","dragDivBg");
    _divSelect.appendChild(_divBg);
    document.body.onmousedown = clickDIV;
}
</script>
</head>
<body>
</body>
</html>