原生 js 实现一个简单的拖拽效果_原生拖拽组件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40893035/article/details/137239023

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的拖放功能，包括拖拽开始、进入目标区域时的元素移动以及拖拽结束的处理。代码展示了如何利用`ondragstart`、`ondragenter`和`ondragend`事件进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
      .drag_demo {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .drag_item {
        width: 200px;
        height: 50px;
        background-color: rgb(255, 146, 62);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: move;
      }
      .drag_start_item {
        opacity: 0.3;
      }
    </style>
  </head>
  <body>
    <div class="drag_demo">
      <div draggable="true" class="drag_item">1</div>
      <div draggable="true" class="drag_item">2</div>
      <div draggable="true" class="drag_item">3</div>
      <div draggable="true" class="drag_item">4</div>
    </div>
    <script>
      // 父元素
      const containerElement = document.querySelector('.drag_demo');
      // 当前正在拖拽的元素
      let dragElement;
      // 拖拽开始时
      containerElement.ondragstart = (event) => {
        setTimeout(() => {
          dragElement = event.target;
          event.target.classList.add('drag_start_item');
        });
      };
      // 拖拽进入时
      containerElement.ondragenter = (event) => {
        // 拖拽进入的目标元素
        const targetElement = event.target;
        // 如果进入的元素是自身，或者父级元素，直接返回
        if (targetElement === dragElement || targetElement === containerElement) return false;
        // containerElement.children 是一个类数组，需要转换为数组
        const containerElementChildrenList = Array.from(containerElement.children);
        // 当前拖拽的元素的索引
        const dragIndex = containerElementChildrenList.indexOf(dragElement);
        // 目标元素的索引
        const targetIndex = containerElementChildrenList.indexOf(targetElement);
        if (dragIndex < targetIndex) {
          // Element.after() 方法会在其父节点的子节点列表中插入一些 Node 或 DOMString 对象。插入位置为该节点之后。DOMString 对象会被以 Text 的形式插入
          // after() 方法不会创建新的元素，它只是将现有元素移动到指定元素之后
          targetElement.after(dragElement);
          console.log('向下');
        }
        if (dragIndex > targetIndex) {
          targetElement.before(dragElement);
          console.log('向上');
        }
      };
      containerElement.ondragend = (event) => {
        event.target.classList.remove('drag_start_item');
        dragElement = null;
      };
    </script>
  </body>
</html>