拖拽交互圆圈列表-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/112237047
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    html,
    body {
      padding: 10px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      line-height: 40px;
      border: 1px solid black;
      margin: 10px;

      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 1s ease;
    }

    .bg {
      background: pink;
    }
  </style>
</head>

<body>
  <ul>
    <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</li>
    <li draggable="true">11</li>
    <li draggable="true">12</li>
    <li draggable="true">13</li>
    <li draggable="true">14</li>
    <li draggable="true">15</li>
    <li draggable="true">16</li>
    <li draggable="true">17</li>
    <li draggable="true">18</li>
    <li draggable="true">19</li>
    <li draggable="true">20</li>
    <li draggable="true">21</li>
    <li draggable="true">22</li>
    <li draggable="true">23</li>
    <li draggable="true">24</li>
    <li draggable="true">25</li>
    <li draggable="true">26</li>
    <li draggable="true">27</li>
    <li draggable="true">28</li>
    <li draggable="true">29</li>
    <li draggable="true">30</li>
  </ul>
  <script>

    function list(dom) {
      // 获取li全部节点
      let list = document.querySelectorAll(dom);
      // 被选中的节点
      let Default = '';
      for (let [key, val] of Object.entries(list)) {
        // 当用户开始拖拽一个元素或选中的文本时触发（见开始拖拽操作）。
        val.addEventListener('dragstart', function (ev) {
          Default = this;

          this.setAttribute('class', 'bg')      //添加
        })

        // 当元素或选中的文本被拖到一个可释放目标上时触发
        val.addEventListener('dragover', function (ev) {
          ev.preventDefault();
          // 目标节点前兄弟节点
          let agoNode = this.previousElementSibling;
          // 目标节点后兄弟节点
          let AfterNode = this.nextElementSibling

          if (AfterNode == null) {
            // 判断目标节点后兄弟节点不为空
            console.log(1)
            this.parentNode.appendChild(Default)
          } else if (Default == agoNode) {
            // 拖拽节点等于目标节点上一个节点
            console.log(2)
            this.parentNode.insertBefore(this, Default)
            // 目标节点放到拖拽节点前面
          } else if (Default != agoNode && Default != AfterNode) {
            // 拖拽节点不等于目标节点前和后兄弟节点
            console.log(3)
            // 拖拽节点放在目标节点后兄弟节点前面
            this.parentNode.insertBefore(Default, AfterNode)
          } else {
            // 默认
            console.log(3)
            this.parentNode.insertBefore(Default, this)
          }
        })

        // 当元素或选中的文本被拖到一个可释放目标上时触发
        val.addEventListener('drop', function (ev) {
          ev.preventDefault();
          // 清除class
          Default.removeAttribute('class', 'bg')
        })

        // 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键).
        val.addEventListener('dragend', function (ev) {
          // 清除class
          Default.removeAttribute('class', 'bg')
        })
      }
    }

    list('li')
  </script>
</body>

</html>
pc端html5拖拽
