登录
首页 >  文章 >  前端

JS实战！手把手教你用3种方式实现网页元素拖拽排序

时间：2025-06-20 16:55:07 158浏览 收藏

想知道如何用JavaScript轻松实现元素拖拽排序吗？本文为你奉上**手把手教程**，并提供**3种实用方案**！无论你是JS新手还是经验丰富的开发者，都能找到适合自己的方法。方案一，基于原生JS，通过监听`dragstart`、`dragover`、`drop`等事件，灵活控制DOM元素的重新排列。方案二，借助强大的SortableJS库，只需简单配置即可实现炫酷的拖拽效果，告别繁琐代码。方案三，针对React项目，结合`react-dnd`和`HTML5Backend`，利用`useDrag`与`useDrop`钩子，轻松构建可拖拽排序的组件。 立即学习，让你的网页交互更上一层楼！

如何使用JavaScript实现拖拽排序？1.基于原生JS，设置元素draggable属性并监听dragstart、dragover、drop事件，在dragstart中记录拖拽元素，dragover中阻止默认行为，drop中重新排列DOM；2.使用SortableJS第三方库，通过引入库文件并初始化Sortable对象，自动处理拖拽逻辑并提供动画和回调配置；3.在React中结合react-dnd和HTML5Backend，利用useDrag与useDrop钩子创建可拖拽和可放置组件，并通过DndProvider提供上下文管理。每种方案均能实现拖拽排序功能，分别适用于不同技术场景和项目需求。

js怎样实现拖拽排序功能 元素拖拽排序的3种实现方案

JavaScript实现拖拽排序功能，核心在于监听元素的拖拽事件，并在拖拽过程中动态调整元素在DOM中的位置。这通常涉及到draggable属性、dragstart、dragover、drop等事件。

js怎样实现拖拽排序功能 元素拖拽排序的3种实现方案

解决方案

要实现元素拖拽排序，主要有三种方案，分别是基于原生JS、基于第三方库（如SortableJS）和基于React等框架的拖拽组件。原生JS方案虽然代码量稍多，但更灵活可控；第三方库则简化了开发流程，但可能引入额外的依赖；框架组件则更适合在特定框架下使用。

js怎样实现拖拽排序功能 元素拖拽排序的3种实现方案

如何使用原生JavaScript实现拖拽排序？

原生JavaScript实现拖拽排序，需要给每个可拖拽的元素设置draggable="true"属性。然后监听dragstart事件，记录被拖拽的元素。接着监听dragover事件，阻止浏览器的默认行为（默认不允许放置）。最后监听drop事件，在该事件中获取放置目标元素，并重新排列DOM结构。

js怎样实现拖拽排序功能 元素拖拽排序的3种实现方案
<!DOCTYPE html>
<html>
<head>
<title>原生JS拖拽排序</title>
<style>
  .draggable {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: move;
  }
</style>
</head>
<body>

<div id="container">
  <div class="draggable" draggable="true">Item 1</div>
  <div class="draggable" draggable="true">Item 2</div>
  <div class="draggable" draggable="true">Item 3</div>
  <div class="draggable" draggable="true">Item 4</div>
</div>

<script>
  const container = document.getElementById('container');
  let draggedItem = null;

  container.addEventListener('dragstart', (e) => {
    draggedItem = e.target;
    e.target.classList.add('dragging'); // 添加拖拽中的样式，可选
  });

  container.addEventListener('dragend', (e) => {
    e.target.classList.remove('dragging'); // 移除拖拽中的样式
    draggedItem = null;
  });


  container.addEventListener('dragover', (e) => {
    e.preventDefault(); // 阻止默认行为，允许放置
  });

  container.addEventListener('drop', (e) => {
    e.preventDefault(); // 阻止默认行为
    const targetItem = e.target;

    if (targetItem.classList.contains('draggable') && targetItem !== draggedItem) {
      // 找到拖拽元素和目标元素在父元素中的位置
      const draggedIndex = Array.from(container.children).indexOf(draggedItem);
      const targetIndex = Array.from(container.children).indexOf(targetItem);

      // 重新排列DOM
      if (draggedIndex < targetIndex) {
        container.insertBefore(draggedItem, targetItem.nextSibling);
      } else {
        container.insertBefore(draggedItem, targetItem);
      }
    }
  });
</script>

</body>
</html>

这段代码实现了基本的拖拽排序功能。核心在于dragstart记录拖拽元素，dragover阻止默认行为，drop事件中判断放置目标，并重新排列DOM。实际应用中，可能需要考虑更复杂的场景，比如嵌套结构的拖拽，或者需要持久化排序结果。

SortableJS库如何简化拖拽排序的实现？

SortableJS是一个轻量级的JavaScript库，专门用于实现拖拽排序功能。它提供了简洁的API，可以轻松地将任何HTML元素列表变成可拖拽排序的列表。使用SortableJS，只需要引入库文件，然后初始化Sortable对象即可。

<!DOCTYPE html>
<html>
<head>
<title>SortableJS拖拽排序</title>
<style>
  .draggable {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: move;
  }
</style>
</head>
<body>

<div id="container">
  <div class="draggable">Item 1</div>
  <div class="draggable">Item 2</div>
  <div class="draggable">Item 3</div>
  <div class="draggable">Item 4</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
  const container = document.getElementById('container');
  new Sortable(container, {
    animation: 150, // 动画效果
    onEnd: function (evt) { // 拖拽结束的回调函数
      // evt.oldIndex: 拖拽元素的原始位置
      // evt.newIndex: 拖拽元素的新位置
      console.log('Old index: ' + evt.oldIndex);
      console.log('New index: ' + evt.newIndex);
    },
  });
</script>

</body>
</html>

SortableJS会自动处理拖拽事件，并提供丰富的配置选项，例如动画效果、拖拽结束的回调函数等。相比原生JS，SortableJS减少了大量的代码编写，提高了开发效率。但需要注意的是，引入第三方库可能会增加项目的体积。

在React中如何实现拖拽排序？

在React中实现拖拽排序，可以使用react-dnd库，它提供了一套完整的拖拽解决方案。react-dnd基于React的组件化思想，将拖拽功能抽象成组件，方便开发者使用。

首先，需要安装react-dnd和react-dnd-html5-backend：

npm install react-dnd react-dnd-html5-backend

然后，创建一个可拖拽的组件和一个可放置的组件，并使用react-dnd提供的useDrag和useDrop hooks将它们连接起来。

import React from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemTypes = {
  CARD: 'card',
};

const Card = ({ id, text, index, moveCard }) => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.CARD,
    item: { id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: ItemTypes.CARD,
    hover: (item, monitor) => {
      if (!draggedItem || draggedItem.id === id) {
        return;
      }

      const draggedIndex = draggedItem.index;
      const targetIndex = index;

      moveCard(draggedIndex, targetIndex);
      draggedItem.index = targetIndex;
    },
  });

  const ref = React.useRef(null);
  drag(drop(ref));

  return (
    <div
      ref={ref}
      style={{
        opacity: isDragging ? 0.5 : 1,
        cursor: 'move',
        padding: '10px',
        border: '1px solid #ccc',
        marginBottom: '5px',
      }}
    >
      {text}
    </div>
  );
};

let draggedItem = null;

const App = () => {
  const [cards, setCards] = React.useState([
    { id: 1, text: 'Card 1' },
    { id: 2, text: 'Card 2' },
    { id: 3, text: 'Card 3' },
    { id: 4, text: 'Card 4' },
  ]);

  const moveCard = React.useCallback((dragIndex, hoverIndex) => {
    setCards((prevCards) => {
      const newCards = [...prevCards];
      const draggedCard = newCards[dragIndex];

      newCards.splice(dragIndex, 1);
      newCards.splice(hoverIndex, 0, draggedCard);

      return newCards.map((card, index) => ({ ...card, index }));
    });
  }, []);

  return (
    <DndProvider backend={HTML5Backend}>
      <div>
        {cards.map((card, index) => (
          <Card
            key={card.id}
            id={card.id}
            text={card.text}
            index={index}
            moveCard={moveCard}
          />
        ))}
      </div>
    </DndProvider>
  );
};

export default App;

这段代码使用react-dnd实现了基本的拖拽排序功能。useDrag hook用于创建可拖拽的元素，useDrop hook用于创建可放置的元素。moveCard函数用于更新卡片的位置。DndProvider组件用于提供拖拽上下文。

今天关于《JS实战！手把手教你用3种方式实现网页元素拖拽排序》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,dom,拖拽排序,SortableJS,react-dnd的内容请关注golang学习网公众号！

JavaScript dom 拖拽排序 SortableJS react-dnd
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>