前端——框选技术的实现

var selList = [];
window.onload = function() {
    //定义鼠标框选的区域
  var canvas = document.getElementById('teminal-area');
  var selDiv;
  var isSelect = false;
  var evt;
    //鼠标点击时候的坐标
  var startX;
  var startY;
    //鼠标移动时的坐标
  var _x = null;
  var _y = null;
    //区域内按下鼠标
  canvas.onmousedown = function(e) {
    evt = window.event || arguments[0];
    var parents = $(e.target).parents();
    var flag = true;
        //需要加上横滚动条与最左边的距离
    startX = (evt.clientX + $(document).scrollLeft() || evt.x);
        //设置范围
    var minOffset = $("#teminal-area").width() + 200 - 20;
        //如果在范围之外，设置flag为false
    if (startX > minOffset) {
      flag = false;
    }
    if (flag) {
            //所有需要被选择的图标
      var fileNodes = document.getElementsByClassName("device-content");
      selList = [];
      for (var i = 0; i < fileNodes.length; i++) {
        if (fileNodes[i].className.indexOf("device-content") != -1) {
          if (fileNodes[i].className.indexOf("seled") != -1) {
            var len = fileNodes[i].className.length;
            fileNodes[i].className = fileNodes[i].className
                .substring(0, len - 6);
          }
          $(fileNodes[i]).find("span").removeClass("selected-mt");
          selList.push(fileNodes[i]);
        }
      }
      // 左击
      if (e.button == 0) {
        isSelect = true;
        startX = (evt.clientX + $(document).scrollLeft() || evt.x);
        startY = (evt.clientY + $(document).scrollTop() || evt.y);
                //虚线框
        selDiv = document.createElement("div");
        selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
        selDiv.id = "selectDiv";
        document.body.appendChild(selDiv);
        selDiv.style.left = startX + "px";
        selDiv.style.top = startY + "px";
      } else if (e.button == 2) {
        // 右击
        $(
            $(this).siblings().children(".device-content")
                .children("span")).removeClass("selected-mt");
      }
    }
  }
  clearEventBubble(evt);
    //区域内移动鼠标
  canvas.onmousemove = function(e) {
    evt = window.event || arguments[0];
    clearEventBubble(evt);
    if (isSelect) {
      if (selDiv.style.display == "none") {
        selDiv.style.display = "";
      }
            //鼠标当前所在的x、y坐标，分别加上滚动条距离最左边与顶端的距离
      _x = (evt.clientX + $(document).scrollLeft() || evt.x);
      _y = (evt.clientY + $(document).scrollTop() || evt.y);
            //框选区域，一个框有4个点，总是选取左上角的点
      selDiv.style.left = Math.min(_x, startX) + "px";
      selDiv.style.top = Math.min(_y, startY) + "px";
      selDiv.style.width = Math.abs(_x - startX) + "px";
      selDiv.style.height = Math.abs(_y - startY) + "px";
      // ---------------- 关键算法 ---------------------
      var teminalTop = $("#teminal-area").scrollTop();
      var _l = selDiv.offsetLeft - 200, _t = selDiv.offsetTop - 135
          + teminalTop;
      var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
      for (var i = 0; i < selList.length; i++) {
        var sl = selList[i].offsetWidth + selList[i].offsetLeft;
        var st = selList[i].offsetHeight + selList[i].offsetTop;
        if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w
            && selList[i].offsetTop < _t + _h) {
          if (selList[i].className.indexOf("seled") == -1) {
            selList[i].className = selList[i].className + " seled";
            $(selList[i]).find("span").addClass("selected-mt");
          }
        } else {
          if (selList[i].className.indexOf("seled") != -1) {
            var len = selList[i].className.length;
            selList[i].className = selList[i].className.substring(
                0, len - 6);
            $(selList[i]).find("span").removeClass("selected-mt");
          }
        }
      }
    }
    clearEventBubble(evt);
  }
    //页面内松开鼠标（这个需要用document，而不是canvas，因为鼠标松开的时候也可能不在区域内）
  document.onmouseup = function(e) {
    isSelect = false;
    if (selDiv) {
      document.body.removeChild(selDiv);
    }
    _x = null, _y = null, selDiv = null, startX = null, startY = null,
        evt = null;
    canvas.onmousewheel = function(){
      return true;
    }
  }
};
//清除事件
function clearEventBubble(evt) {
  var evt = window.event || arguments[0];
  if (evt.stopPropagation != null && evt.stopPropagation != undefined)
    evt.stopPropagation();
  else
    evt.cancelBubble = true;
  if (evt.preventDefault)
    evt.preventDefault();
  else
    evt.returnValue = false;
}