实现方式
绑定mouse的事件,鼠标结束后将选择框内我们想选中的元素找出来
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>jquery选择元素</title>
<style>
#outer-wapper {
/* 禁止选择, 这样我们自己的选择框就能出来了 */
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
#rect {
position: absolute;
border: 2px dashed rgb(141, 141, 141);
background-color: black;
opacity: 0.1;
filter: alpha(opacity=10);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
}
#outer-wapper {
width: 500px;
height: 500px;
visibility: visible;
border: solid 1px #eee;
margin-top: 100px;
position: relative;
}
#outer-wapper button {
margin: 50px;
height: 40px;
line-height: 40px;
}
button.selected {
border: 1px solid green;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div id="outer-wapper">
<button>多福多寿</button>
<button>华尔兹</button>
<button>报批单</button>
<button>金域诊断</button>
<button>英语学习</button>
<button>40不立</button>
<button>流落街头</button>
<div id="rect"></div>
</div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript">
var SelectBtns = function (c, r) {
//
var select = false
var rect = document.getElementById(r)
rect.style.width = 0
rect.style.height = 0
rect.style.visibility = 'hidden'
//设置选择蹭
rect.style.zIndex = 1000
// 记录鼠标按下时的坐标
var downX = 0
var downY = 0
// 记录鼠标抬起时候的坐标
var mouseX2 = downX
var mouseY2 = downY
this.init = function () {}
//处理鼠标按下事件
this.down = function (event) {
select = true
downX = event.offsetX
downY = event.offsetY
//设置你要画的矩形框的起点位置
rect.style.left = downX
rect.style.top = downY
rect.style.width = 0
rect.style.height = 0
$btns.removeClass('selected')
}
//鼠标移动事件,最主要的事件
this.move = function (event) {
// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX
mouseY2 = event.clientY
/*
这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
*/
if (select) {
// 设置拉框的大小
rect.style.width = Math.abs(mouseX2 - downX)
rect.style.height = Math.abs(mouseY2 - downY)
rect.style.visibility = 'visible'
// A part
if (mouseX2 < downX && mouseY2 < downY) {
rect.style.left = mouseX2
rect.style.top = mouseY2
}
// B part
if (mouseX2 > downX && mouseY2 < downY) {
rect.style.left = downX
rect.style.top = mouseY2
}
// C part
if (mouseX2 < downX && mouseY2 > downY) {
rect.style.left = mouseX2
rect.style.top = downY
}
// D part
if (mouseX2 > downX && mouseY2 > downY) {
rect.style.left = downX
rect.style.top = downY
}
return get_select_list()
}
}
//鼠标抬起事件
this.up = function (event) {
//鼠标抬起,就不允许在处理鼠标移动事件
select = false
//隐藏图层
rect.style.visibility = 'hidden'
return get_select_list()
}
function get_select_list() {
var rect = {
x0: $rect.offset().left,
y0: $rect.offset().top,
x1: $rect.offset().left + $rect.outerWidth(),
y1: $rect.offset().top + $rect.outerHeight(),
width: $rect.outerWidth(),
height: $rect.outerHeight(),
}
var selBtns = []
if (rect.width > 64 && rect.height > 40) {
$btns.each(function () {
var btn = $(this)
var x0 = btn.offset().left
var y0 = btn.offset().top
var x1 = x0 + btn.outerWidth()
var y1 = y0 + btn.outerHeight()
// console.log(rect, btn, { x0, y0, x1, y1 })
if (x0 > rect.x0 && y0 > rect.y0 && x1 <= rect.x1 && y1 <= rect.y1) {
selBtns.push(btn)
btn.addClass('selected')
} else {
btn.removeClass('selected')
}
})
}
}
}
var select_list, $btns, $outer, $rect, selectBtns
$(function () {
$outer = $('#outer-wapper')
$btns = $('button')
$rect = $('#rect')
selectBtns = new SelectBtns('outer-wapper', 'rect')
selectBtns.init()
$outer.on('mousedown', function (event) {
selectBtns.down(event)
})
$outer.on('mousemove', function (event) {
selectBtns.move(event)
})
$outer.on('mouseup', function (event) {
selectBtns.up(event)
})
})
</script>
</body>
</html>
