目的
最近项目中需要一个自定义布局方案,可自定义框选后组合成一个新的布局方式,如下图所示:
代码如下:
<!DOCTYPE html>
<html style="margin: 0;width: 100%;height:100%">
<head>
<meta charset="utf-8">
<title></title>
<style>
.out {
width: 100%;
height: 100%;
}
.selecttobox {
background-color: red;
}
.selected {
background-color: blue;
}
.select-item {
border: 1px solid #cccccc;
float: left;
width: calc(25% - 2px);
height: 25%;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$( document ).ready( function () {
var initSelectBox = function ( selector ) {
function clearBubble ( e ) {
if ( e.stopPropagation ) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
if ( e.preventDefault ) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
var $container = $( selector ); var moved = false;
// 框选事件
$container.on( 'mousedown', function ( eventDown ) {
// 设置选择的标识
var isSelect = false;
moved = false;
var selectBoxDashed = document.createElement( "div" );
selectBoxDashed.className = "selecttobox"
$( 'body' ).append( selectBoxDashed );
// 创建选框节点
var $selectBoxDashed = $( selectBoxDashed );
// 设置选框的初始位置
var startX = eventDown.x || eventDown.clientX;
var startY = eventDown.y || eventDown.clientY;
$selectBoxDashed.css( {
left: startX,
top: startY
} );
// 根据鼠标移动,设置选框宽高
var _x = null;
var _y = null;
// 清除事件冒泡、捕获
clearBubble( eventDown );
// 监听鼠标移动事件
$( selector ).on( 'mousemove', function ( eventMove ) {
// 设置选框可见
$selectBoxDashed.css( 'display', 'block' );
_x = eventMove.x || eventMove.clientX;
_y = eventMove.y || eventMove.clientY;
var _left = Math.min( _x, startX );
var _top = Math.min( _y, startY );
var _width = Math.abs( _x - startX );
var _height = Math.abs( _y - startY );
if ( _width <= 2 || _height <= 2 ) {
return false;
}
moved = true;
$selectBoxDashed.css( {
left: _left,
top: _top,
width: _width,
height: _height, position: 'absolute',
} );
// 遍历容器中的选项,进行选中操作
$( selector ).find( '.select-item' ).each( function () {
var $item = $( this );
var itemX_pos = $item.prop( 'offsetWidth' ) + $item.prop( 'offsetLeft' );
var itemY_pos = $item.prop( 'offsetHeight' ) + $item.prop( 'offsetTop' );
var condition1 = itemX_pos > _left;
var condition2 = itemY_pos > _top;
var condition3 = $item.prop( 'offsetLeft' ) < ( _left + _width );
var condition4 = $item.prop( 'offsetTop' ) < ( _top + _height );
if ( condition1 && condition2 && condition3 && condition4 ) {
$item.addClass( 'selected' );
} else {
$item.removeClass( 'selected' );
}
} );
// 清除事件冒泡、捕获
clearBubble( eventMove );
} );
$( document ).on( 'mouseup', function ( e ) {
$( selector ).off( 'mousemove' );
$selectBoxDashed.remove();
} );
} )
// 点选切换选中事件
.on( 'click', '.select-item', function () {
if ( !moved ) {
if ( $( this ).hasClass( 'selected' ) ) {
$( this ).removeClass( 'selected' );
} else {
$( this ).addClass( 'selected' );
}
}
} )
};
initSelectBox( '.out' );
} );
</script>
</head>
<body style="margin: 0;width: 100%;height:100%">
<div class="out" style="">
<div class="select-item">1</div>
<div class="select-item">2</div>
<div class="select-item">3</div>
<div class="select-item">4</div>
<div class="select-item">5</div>
<div class="select-item">6</div>
<div class="select-item">7</div>
<div class="select-item">8</div>
<div class="select-item">9</div>
<div class="select-item">10</div>
<div class="select-item">11</div>
<div class="select-item">12</div>
<div class="select-item">13</div>
<div class="select-item">14</div>
<div class="select-item">15</div>
<div class="select-item">16</div>
</div>
</body>
</html>