js实现鼠标拖拽多选功能

原创

已于 2024-05-23 11:21:05 修改 · 1.4k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #html5 #css #vue.js #html

于 2024-05-20 12:03:37 首次发布

实现功能
在PC端的H5页面中，客户拖动鼠标可以连选多个选项

效果展示
在这里插入图片描述

具体代码如下

<!DOCTYPE html>
<html>

<head>
	<title>鼠标拖拽多选功能</title>
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
		* {
     
     
			box-sizing: border-box;
		}

		ul {
     
     
			width: 500px;
			height: auto;
			margin: 0;
			padding: 20px;
			font-size: 0;
			/*需设置定位*/
			position: relative;
		}

		li {
     
     
			width: 70px;
			height: 70px;
			padding: 0;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			border: 1px solid #d9d9d9;
		}

		#moveSelected {
     
     
			position: absolute;
			background-color: blue;
			opacity: 0.3;
			border: 1px dashed #d9d9d9;
			top: 0;
			left: 0;
		}

		.selected {
     
     
			background-color: pink;
		}
	</style>
</head>

<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
		<li>21</li>
		<li>22</li>
		<!-- 鼠标拖拽出的遮罩 （定位为  position:absolute）-->
		<!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
		<div id="moveSelected"></div>
	</ul>
</body>

</html>
<script type="text/javascript">
	$(document).ready(function () {
     
     
		let moveSelected = $('#moveSelected')[0];
        console.log(moveSelected);
		let flag = false; //是搜开启拖拽的标志
		let oldLeft =

最低0.47元/天解锁文章