js实现鼠标拖拽多选功能

最新推荐文章于 2024-02-17 09:28:20 发布

dioubiu

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量793

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/dioubiu/article/details/127833198

版权

该博客介绍了一种利用JavaScript实现的鼠标拖拽多选功能，通过创建遮罩层，当元素被遮罩层覆盖时即视为选中状态。涉及到HTML、CSS和JavaScript的结合应用。

摘要由CSDN通过智能技术生成

做了一个用js实现鼠标拖拽多选的功能，

遮罩层出现：

被遮罩层盖住即为选中的块：

代码：

html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow"/>
    <meta name="googlebot" content="noindex, nofollow"/>
    <title></title>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js" ></script>
    <link rel="stylesheet" type="text/css" href="./main.css"/>

</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&g