select-range/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
  #app {
    margin: 10vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    > div {
      color: transparent;
      width: 15vw;
      aspect-ratio: 1;
      background: gray;
      &.selected {
        background: red;
      }
    }
  }
  .rect-area {
    border: 1px solid gray;
    background: rgba(0, 255, 0, 0.02)
  }
</style>
<script src="./index.js" type="module"></script>
</head>
<body>
  <h1>框选区域</h1>
  <div id="app">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>