有趣且重要的JS知识合集（23）原生实现列表的拖拽

林大大哟

于 2024-07-13 14:13:14 发布

阅读量68

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_39404437/article/details/140399312

版权

介绍：这个场景还是很常见的，一般用于列表拖拽排序的地方，虽然现在有例如draggable之类的插件，不过用原生来写也还是不难~重要的几个点就是监听拖拽时触发的dragstart、dragenter、dragend等事件

1、效果截图

2、源码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生实现列表拖拽</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        margin: 200px auto;
        width: 400px;
        list-style-type: none;
        height: 300px;
        border: 1px solid #eee;
        overflow-y: auto;
      }
      li {
        margin: 5px 0;
        text-align: center;
        width: 100%;
        height: 30px;
        background: skyblue;
        cursor: move;
      }
      .list .moving {
        background: transparent;
        color: transparent;
        border: 1px dashed #ccc;
      }
    </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</li>
    </ul>

    <script>
      let list = document.querySelector(".list");
      let currentLi;
      list.addEventListener("dragstart", (e) => {
        currentLi = e.target;
      });

      list.addEventListener("dragenter", (e) => {
        e.preventDefault();
        if (e.target === currentLi || e.target === list) {
          return;
        }
        let liArray = Array.from(list.childNodes);
        let currentIndex = liArray.indexOf(currentLi);
        let targetindex = liArray.indexOf(e.target);

        if (currentIndex < targetindex) {
          list.insertBefore(currentLi, e.target.nextElementSibling);
        } else {
          list.insertBefore(currentLi, e.target);
        }
      });
      list.addEventListener("dragover", (e) => {
        e.preventDefault();
      });
      list.addEventListener("dragend", (e) => {
        currentLi.classList.remove("moving");
      });
    </script>
  </body>
</html>

林大大哟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有趣且重要的JS知识合集（23）原生实现列表的拖拽

介绍：这个场景还是很常见的，一般用于列表拖拽排序的地方，虽然现在有例如draggable之类的插件，不过用原生来写也还是不难~重要的几个点就是监听拖拽时触发的dragstart、dragenter、dragend等事件。
复制链接

扫一扫