js 给div 添加选区，类似windows桌面选区一样，兼容ie6、7、8、9、10、Firefox、Google、所有浏览器

先来一张效果图：



兼容：

IE6 反应有点迟钝，效果没有火狐好。

主要的效果就是，模仿windows桌面的那个选区。可以用选框选区图标。

由于js代码太多，只贴一段核心的代码。

js核心代码:

//选区
function select(){

//为工作区创建一个选区

var _down=false;
var pos={x:0,y:0};
var move={x:0,y:0};
$(".working").mousedown(function(event) {

//如果是右键
if(event.button==2)return;

//不是点击的桌面 返回
if(!$(event.target).is(".icons"))return;

_down=true;
pos.x=event.clientX;
pos.y=event.clientY;
$(".select").css("left",pos.x);
$(".select").css("top",pos.y);

$(".select").show();
});

$(".working").mousemove(function(event) {
if(!_down)return;

move.x=event.clientX;
move.y=event.clientY;

//减去2 兼容ie
var width=move.x-pos.x-2;
var height=move.y-pos.y-2;

var select=$(".select");

//选区向左
if(width>=0&&height>=0){
select.css("width",width);
select.css("height",height);
}else{
//选区向右延伸
if(width<0){
//求绝对值
var w=Math.abs(width);
select.css("width",w);
select.css("left",move.x);
if(height>=0){
select.css("height",height);
}
}
if (height<=0) {
var h=Math.abs(height);
select.css("height",h);
select.css("top",move.y);
if(width>=0){
select.css("width",width);
}
}
}

});

$(".working").mouseup(function() {
_down=false;
$(".select").css("width",0);
$(".select").css("height",0);
$(".select").hide();
});

}

上面的效果当然还需要配合css 来做。完整的Dome过一段时间发。