前端——框选技术的实现

 

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