示例简单写？能拖拽排序就行

提示信息

朦胧海

05月25日发表在图文创作、问答社区 / My Coding Q&A Community 阅读 110 评论 20 | 免费使用 “AI大模型GPT4.0” 提问

如果你需要一个最基础的拖拽排序实现，那么可以考虑使用react-sortable-hoc。这是一个简化版本的示例，仅包含关键的拖动和排序功能：

首先，安装这个库：

npm install react-sortable-hoc

然后，创建一个可排序列表：

import React, { useState } from 'react';  
import { SortableContainer, SortableElement } from 'react-sortable-hoc';  
import arrayMove from 'array-move';  
const SortableItem = SortableElement(({value}) => <div>{value}</div>);  
const SortableList = SortableContainer(({items}) => {  
  return (  
    <div>  
      {items.map((value, index) => (  
        <SortableItem key={`item-${value}`} index={index} value={value} />  
      ))}  
    </div>  
  );  
});  
function MyComponent() {  
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);  
  const onSortEnd = ({oldIndex, newIndex}) => {  
    setItems(arrayMove(items, oldIndex, newIndex));  
  };  
  return <SortableList items={items} onSortEnd={onSortEnd} />;  
}  
export default MyComponent;

在这个组件中，我们有一个items状态，它是用于表示列表项顺序的数组。当排序结束后，onSortEnd回调将被触发，并且我们在这里更新items的状态以反映新的顺序。

遇到难题？ "AI大模型GPT4.0、GPT" 是你的私人解答专家！点击按钮去提问......

朦胧海赞 | 0

最近一次登录：2024-10-28 14:07:34

暂时还没有签名，请关注我或评论我的文章

20条评论

按时间正序按时间倒序按喜欢排序

晴天娃娃

06月01日

使用react-sortable-hoc的例子简洁明了，覆盖了基本的拖拽排序功能。

赞 0 回复举报

如血飞虹： @晴天娃娃

在实现拖拽排序功能时，react-sortable-hoc的确是一个不错的选择。它提供了简洁的API，方便我们快速上手。例如，可以使用以下代码来创建一个基本的可排序列表：

import React from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = { items: ['Item 1', 'Item 2', 'Item 3'] };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {
    return (
      <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
    );
  }
}

export default SortableComponent;

在这个示例中，SortableContainer和SortableElement帮助你实现了基本的拖拽排序功能，arrayMove函数的引入需要额外处理，以便于更新你的列表数据。

建议查看 react-sortable-hoc 的文档，以更深入了解其更多用法和高级场景处理，例如自定义样式和动画。另外，考虑使用react-beautiful-dnd作为替代方案，它同样提供了良好的拖拽体验。

11月14日回复举报

添加新评论

肝

06月11日

教程中提供的示例非常基础但实用，适合初学者快速上手实现拖拽排序功能。

赞 0 回复举报

芸芸： @肝

在实现拖拽排序功能时，确实可以从一些基础的示例入手进行理解。在这里，可以参考以下简单的代码实现，用于快速构建一个可拖拽排序的列表：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽排序示例</title>
    <style>
        .sortable { list-style: none; padding: 0; }
        .sortable li { padding: 10px; margin: 5px; background: #f0f0f0; border: 1px solid #ccc; cursor: move; }
    </style>
</head>
<body>
<ul class="sortable">
    <li draggable="true">项目 1</li>
    <li draggable="true">项目 2</li>
    <li draggable="true">项目 3</li>
    <li draggable="true">项目 4</li>
</ul>

<script>
    const items = document.querySelectorAll('.sortable li');

    items.forEach(item => {
        item.addEventListener('dragstart', dragStart);
        item.addEventListener('dragover', dragOver);
        item.addEventListener('drop', drop);
    });

    function dragStart(e) {
        e.dataTransfer.setData('text/plain', e.target.innerText);
        e.target.classList.add('dragging');
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function drop(e) {
        e.preventDefault();
        const draggedText = e.dataTransfer.getData('text/plain');
        const target = e.target;

        if (target && target.nodeName === 'LI') {
            target.insertAdjacentHTML('afterend', `<li draggable="true">${draggedText}</li>`);
            target.remove();
            // 重新绑定事件
            items.forEach(item => {
                item.addEventListener('dragstart', dragStart);
                item.addEventListener('dragover', dragOver);
                item.addEventListener('drop', drop);
            });
        }
    }
</script>
</body>
</html>

使用这样的简单代码，可以帮助新手掌握拖拽排序的基本概念。如果想深入了解拖拽排序的实现，建议参阅 MDN Web Docs。这种方式不仅能提高开发者的实际操作能力，还能为后续的复杂场景打下良好基础。

11月10日回复举报

添加新评论

珐蓝

06月16日

react-sortable-hoc对于简单的排序功能够用，但在复杂场景下可能需要自定义更多功能。

赞 0 回复举报

望眼： @珐蓝

对于拖拽排序的需求，react-sortable-hoc确实为简单场景提供了不错的解决方案。然而，在更复杂的应用中，可能会遇到一些限制，比如需要支持多列排序、分组或者嵌套结构等功能。

为了处理更复杂的情况，可以考虑使用 react-beautiful-dnd，这个库在功能上更为强大，并提供了良好的文档和示例。它的使用方式非常灵活，适合需要自定义行为的场景。简单的使用示例如下：

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = [{ id: '1', content: 'Item 1' }, { id: '2', content: 'Item 2' }];

const onDragEnd = (result) => {
  // 处理拖拽结束后的逻辑
};

const DndExample = () => (
  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="droppable">
      {(provided) => (
        <ul ref={provided.innerRef} {...provided.droppableProps}>
          {items.map((item, index) => (
            <Draggable key={item.id} draggableId={item.id} index={index}>
              {(provided) => (
                <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                  {item.content}
                </li>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </ul>
      )}
    </Droppable>
  </DragDropContext>
);

export default DndExample;

在处理复杂的排序需求时，灵活运用状态管理和条件渲染十分重要。另外，可以参考 react-beautiful-dnd 的文档来深入了解其更多功能和用法。

11月12日回复举报

添加新评论

妩媚成花

06月24日

文章中的代码思路清晰，利用arrayMove函数有效地更新状态，避免了冗余操作。

赞 0 回复举报

韦远明： @妩媚成花

对于实现拖拽排序功能，使用 arrayMove 函数是一个不错的选择，确保状态更新高效并且清晰。不过，在实际应用中，可能还需要处理用户体验方面的问题，比如在拖拽过程中给用户一种反馈，指示当前移动项的位置。

可以考虑在拖拽操作开始时添加一个样式，将被拖拽的项高亮显示。例如：

const handleDragStart = (index) => {
    setDraggingIndex(index);
};

// 在拖拽过程中，设置高亮
const handleDragOver = (index) => {
    // 逻辑代码
};

// 在拖拽结束时，清除高亮
const handleDragEnd = () => {
    setDraggingIndex(null);
};

此外，如果希望进一步提升用户体验，可以添加一些动效来辅助视觉上的拖拽效果。使用 CSS 动画效果，可以让拖拽过程更加流畅。可以参考 CSS Tricks 上的相关动效实现方法，配合简单的 JavaScript 逻辑，实现更佳的交互体验。

记得在实现拖拽排序时，兼顾不同设备和浏览器的兼容性，确保在触摸设备上也能够顺利使用。相关的学习资源可以查阅 MDN Web Docs。

11月14日回复举报

添加新评论

浅唱

06月30日

建议使用react-beautiful-dnd作为替代，这个库也支持复杂的拖拽交互。官网链接

赞 0 回复举报

梦次少女： @浅唱

react-beautiful-dnd 确实是一个很好的选择，特别是在需要实现复杂的拖拽交互时。它提供了强大的功能，也让开发者能够更轻松地管理拖拽状态。下面是一个简单的使用示例，展示如何实现基本的拖拽排序功能：

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

const App = () => {
  const [itemList, setItemList] = React.useState(items);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const reorderedItems = Array.from(itemList);
    const [removed] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, removed);

    setItemList(reorderedItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {itemList.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided) => (
                  <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    {item}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

这个示例展示了一个简单的拖拽排序列表，使用 DragDropContext、Droppable 和 Draggable 组件来管理拖拽状态。可以参考react-beautiful-dnd 的文档了解更多功能与定制选项。此外，建议关注其性能优化和使用场景，以确保在复杂应用中也能保持流畅的用户体验。

11月10日回复举报

添加新评论

韦国权

07月08日

代码示例用了useState，非常契合React的状态管理哲学，逻辑直接。

赞 0 回复举报

拉风小姐： @韦国权

对于使用 useState 的评论，确实可以很方便地管理组件状态。如果需要实现拖拽排序功能，结合 useState 和一些拖拽库，如 react-beautiful-dnd，效果会更好。以下是一个简单的示例，展示如何使用 useState 来管理拖拽排序的状态：

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
];

const DraggableList = () => {
  const [items, setItems] = useState(initialItems);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    const reorderedItems = Array.from(items);
    const [removed] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, removed);

    setItems(reorderedItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    {item.content}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default DraggableList;

这个例子展示了如何通过 useState 和拖拽库管理列表项的排序，同时保持代码的简洁性和逻辑清晰。如果有兴趣，可以查看 react-beautiful-dnd 的文档，获取更多关于实现拖拽排序的细节和高级用法。

11月15日回复举报

添加新评论

十二

07月11日

可以考虑用React.memo进一步优化SortableItem组件来提升性能，减少不必要的渲染。

赞 0 回复举报

韦诚辉： @十二

考虑到React的性能优化，使用React.memo确实是一个值得探索的方向。这样可以有效避免组件在props未发生变化时的重复渲染，尤其是在有复杂渲染逻辑的情况下。可以参考以下示例，展示如何对SortableItem进行优化：

import React from 'react';

const SortableItem = React.memo(({ item, onDragStart }) => {
    console.log('Rendering: ', item.id);
    return (
        <div draggable onDragStart={() => onDragStart(item.id)}>
            {item.content}
        </div>
    );
});

上面的代码示例中，SortableItem使用了React.memo，这样只有在item属性发生变化时，组件才会重新渲染。这在列表较大且操作频繁的情况下，可以明显提升性能。当然，要确保传入的item是一个稳定的引用，才能最大程度地发挥优化效果。

另外，可以参考官方对React.memo的详细说明，以深入理解其内部工作机制和使用场景：React.memo Documentation。

这样的方案不仅能提高性能，还能确保用户操作的流畅性，是编写可维护和高效代码的一个好方法。

5天前回复举报

添加新评论

酷

07月16日

react-sortable-hoc库虽然功能齐全，但在移动端的兼容性上可能需要自行调整。

赞 0 回复举报

爱情： @酷

在使用 react-sortable-hoc 库时，的确移动端的兼容性可能会成为一个需要关注的问题。可以通过一些方式来改善移动端体验，比如在触摸事件上调整拖拽的处理方式，或者结合 react-draggable 来实现更流畅的操作体验。

以下是一个简单的代码示例，使用 react-draggable 来实现基本的拖拽效果：

import React from 'react';
import Draggable from 'react-draggable';

const DraggableItem = ({ children }) => (
  <Draggable>
    <div style={{ padding: '10px', border: '1px solid #ccc', cursor: 'move' }}>
      {children}
    </div>
  </Draggable>
);

const DraggableList = () => {
  return (
    <div>
      <DraggableItem>Item 1</DraggableItem>
      <DraggableItem>Item 2</DraggableItem>
      <DraggableItem>Item 3</DraggableItem>
    </div>
  );
};

此外，可以建议查阅一些关于移动端优化的资料，如 MDN 的 Touch Events 或 CSS Tricks 关于移动端拖拽的文章来深入了解如何优化移动设备上的拖拽体验。这样的方式或许能在移动端实现更加友好流畅的用户交互。

5天前回复举报

添加新评论

贪嗔痴念

07月19日

用例在项目中的实际应用效果很好，特别是在表单元素排序上，易于维护和扩展。

赞 0 回复举报

泡泡沫沫： @贪嗔痴念

在处理表单元素排序时，采用拖拽排序确实提升了用户体验，并且看到应用效果时令人满意。考虑使用一个简单的JavaScript库，例如Sortable.js，可以快速实现这一功能。下面是一个基本的示例代码：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>拖拽排序示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
</head>
<body>
    <ul id="sortable">
        <li>元素 1</li>
        <li>元素 2</li>
        <li>元素 3</li>
        <li>元素 4</li>
    </ul>

    <script>
        new Sortable(document.getElementById('sortable'), {
            animation: 150,
            onEnd: function (evt) {
                console.log('排序已更改，新的索引：', evt.newIndex);
            }
        });
    </script>
</body>
</html>

这个例子使用了Sortable库，让元素可以拖拽排序，同时在排序完成后触发事件，打印新的索引。在实际应用中，可以结合后端进行数据保存，确保排序的持久性。有兴趣可以进一步深入 Sortable.js文档，获取更多功能和使用方式。 ```

6天前回复举报

添加新评论

厮守

07月30日

如果需要更复杂的排序交互，如嵌套式列表，可以尝试dnd-kit库，它提供更大的灵活性。

赞 0 回复举报

甜到： @厮守

很赞同这种选择，dnd-kit 的确是处理复杂拖拽排序的一个不错选择，特别是在需要嵌套列表或是多层级交互的情况下。它提供了强大的API和灵活的组件，使得实现自定义拖拽行为变得更加轻松。

在使用 dnd-kit 时，可以通过以下简单示例展示如何实现一个基本的嵌套可拖拽列表：

import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';

function DraggableItem({ id, children }) {
  const { attributes, listeners, setNodeRef } = useDraggable({ id });
  return (
    <div ref={setNodeRef} {...listeners} {...attributes}>
      {children}
    </div>
  );
}

function DroppableArea({ id, children }) {
  const { setNodeRef } = useDroppable({ id });
  return <div ref={setNodeRef}>{children}</div>;
}

function App() {
  return (
    <DndContext>
      <DroppableArea id="droppable-1">
        <DraggableItem id="item-1">Item 1</DraggableItem>
        <DraggableItem id="item-2">Item 2</DraggableItem>
      </DroppableArea>
    </DndContext>
  );
}

这样可以更好地组织代码和实现交互效果。关于 dnd-kit 的更多细节，可以参考它的官方文档：dnd-kit documentation。对于复杂的应用场景，这样的工具能极大地提升开发效率和用户体验。

5天前回复举报

添加新评论

免费图表工具，画流程图、架构图

示例简单写？ 能拖拽排序就行

举报评论

删除

删除后，将不可回复，确认要删除？

提示

复制代码，请先登录

示例简单写？能拖拽排序就行