自由div框选页面元素

buffos

已于 2022-05-11 10:43:10 修改

阅读量384

点赞数

分类专栏：前端文章标签：前端

于 2022-04-26 18:02:02 首次发布

本文链接：https://blog.csdn.net/qq_20793733/article/details/124433455

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目的

最近项目中需要一个自定义布局方案，可自定义框选后组合成一个新的布局方式，如下图所示：
在这里插入图片描述
代码如下：

<!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>

buffos

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自由div框选页面元素

目的最近项目中需要一个自定义布局方案，可自定义框选后组合成一个新的布局方式，如下图所示：代码如下：<!DOCTYPE html><html style="margin: 0;width: 100%;height:100%"><head> <meta charset="utf-8"> <title></title> <style> .out { width: 100%; height: 10
复制链接

扫一扫