前端js实现鼠标多选拖拽

最新推荐文章于 2024-11-06 15:39:41 发布

来陪人家玩游戏嘛

最新推荐文章于 2024-11-06 15:39:41 发布

阅读量2.3k

点赞数 2

分类专栏： js高级文章标签： css3 css javascript

本文链接：https://blog.csdn.net/gongliming_qd/article/details/122176442

版权

样式效果

在这里插入图片描述

完整代码

<!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;
      margin: 10px;
      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;
    }

    .box {
     
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }

  </style>
</head>

<body>


  <ul class="list">
    <li draggable="true">1</li>
    <li draggable="true">2</li>
    <li draggable="true">3</li>
    <li draggable="true">4</li>
    <li draggable="true">5</li>
    <li draggable="true">6</li>
    <li draggable="true">7</li>
    <li draggable="true">8</li>
    <li draggable="true">9</li>
    <li draggable="true">10

最低0.47元/天解锁文章