react拖拽组件react-sortable-hoc如何使用

发布时间：2023-02-24 11:11:46 作者：iii
来源：亿速云阅读：307

React拖拽组件react-sortable-hoc如何使用

简介

react-sortable-hoc 是一个用于实现拖拽排序功能的 React 高阶组件库。它提供了简单易用的 API，可以帮助开发者快速实现列表项的拖拽排序功能。无论是简单的列表还是复杂的嵌套结构，react-sortable-hoc 都能轻松应对。

安装

在使用 react-sortable-hoc 之前，首先需要将其安装到项目中。你可以使用 npm 或 yarn 进行安装：

npm install react-sortable-hoc

或者

yarn add react-sortable-hoc

基本用法

1. 创建一个可拖拽的列表

首先，我们需要创建一个简单的列表，并将其转换为可拖拽的列表。以下是一个基本的示例：

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>
  );
});

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <div>
      <h1>Sortable List</h1>
      <SortableList items={items} onSortEnd={({ oldIndex, newIndex }) => {
        console.log('Item moved from', oldIndex, 'to', newIndex);
      }} />
    </div>
  );
};

export default App;

在这个示例中，我们首先使用 SortableElement 高阶组件将列表项包装为可拖拽的元素。然后，使用 SortableContainer 高阶组件将整个列表包装为可拖拽的容器。最后，我们在 App 组件中使用 SortableList 组件，并传入一个包含列表项的数组。

2. 处理拖拽结束事件

在 SortableList 组件中，我们传入了一个 onSortEnd 回调函数。这个函数会在拖拽结束时被调用，并接收一个包含 oldIndex 和 newIndex 的对象作为参数。你可以在这个回调函数中更新列表的顺序。

const App = () => {
  const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    const newItems = arrayMove(items, oldIndex, newIndex);
    setItems(newItems);
  };

  return (
    <div>
      <h1>Sortable List</h1>
      <SortableList items={items} onSortEnd={onSortEnd} />
    </div>
  );
};

在这个示例中，我们使用了 arrayMove 函数来更新列表的顺序。arrayMove 是 react-sortable-hoc 提供的一个实用函数，用于将数组中的元素从一个位置移动到另一个位置。

自定义拖拽手柄

默认情况下，整个列表项都可以被拖拽。但在某些情况下，你可能希望只有特定的部分（例如一个手柄）可以触发拖拽操作。react-sortable-hoc 允许你通过 distance 和 pressDelay 属性来控制拖拽的触发条件。

1. 使用 `distance` 属性

distance 属性用于指定鼠标移动多少像素后才触发拖拽操作。通过设置这个属性，你可以避免误触拖拽操作。

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

在这个示例中，只有当鼠标移动超过 10 像素时，才会触发拖拽操作。

2. 使用 `pressDelay` 属性

pressDelay 属性用于指定鼠标按下后延迟多少毫秒才触发拖拽操作。通过设置这个属性，你可以避免误触拖拽操作。

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

在这个示例中，只有当鼠标按下超过 200 毫秒时，才会触发拖拽操作。

3. 自定义拖拽手柄

如果你希望只有特定的部分可以触发拖拽操作，可以使用 SortableHandle 高阶组件来创建一个拖拽手柄。

import { SortableHandle } from 'react-sortable-hoc';

const DragHandle = SortableHandle(() => <span>::</span>);

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

在这个示例中，我们使用 SortableHandle 高阶组件创建了一个拖拽手柄。只有点击这个手柄时，才会触发拖拽操作。

限制拖拽方向

默认情况下，react-sortable-hoc 允许在水平和垂直方向上进行拖拽。但你可以通过 axis 属性来限制拖拽方向。

1. 限制为水平方向

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

在这个示例中，我们通过设置 axis 属性为 'x'，将拖拽方向限制为水平方向。

2. 限制为垂直方向

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

在这个示例中，我们通过设置 axis 属性为 'y'，将拖拽方向限制为垂直方向。

拖拽时的样式

在拖拽过程中，你可能希望为被拖拽的元素添加一些样式。react-sortable-hoc 提供了 helperClass 和 helperContainer 属性来实现这一点。

1. 使用 `helperClass` 属性

helperClass 属性用于为被拖拽的元素添加一个 CSS 类。

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

在这个示例中，当元素被拖拽时，dragging 类会被添加到被拖拽的元素上。

2. 使用 `helperContainer` 属性

helperContainer 属性用于指定被拖拽元素的容器。默认情况下，被拖拽的元素会被添加到 body 元素中。你可以通过设置 helperContainer 属性来改变这一行为。

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

在这个示例中，被拖拽的元素会被添加到 #container 元素中。

拖拽时的回调函数

react-sortable-hoc 提供了多个回调函数，用于在拖拽过程中执行特定的操作。

1. `onSortStart`

onSortStart 回调函数会在拖拽开始时被调用。

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
}, { onSortStart: () => console.log('Sort started') });

2. `onSortMove`

onSortMove 回调函数会在拖拽过程中被调用。

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
}, { onSortMove: () => console.log('Sort moving') });

3. `onSortEnd`

onSortEnd 回调函数会在拖拽结束时被调用。

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
}, { onSortEnd: () => console.log('Sort ended') });

嵌套拖拽

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>
  );
});

const NestedSortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <li key={`item-${index}`}>
          {value}
          <SortableList items={value.children} onSortEnd={({ oldIndex, newIndex }) => {
            console.log('Child item moved from', oldIndex, 'to', newIndex);
          }} />
        </li>
      ))}
    </ul>
  );
});

const App = () => {
  const items = [
    { name: 'Item 1', children: ['Child 1', 'Child 2', 'Child 3'] },
    { name: 'Item 2', children: ['Child 4', 'Child 5', 'Child 6'] },
    { name: 'Item 3', children: ['Child 7', 'Child 8', 'Child 9'] },
  ];

  return (
    <div>
      <h1>Nested Sortable List</h1>
      <NestedSortableList items={items} onSortEnd={({ oldIndex, newIndex }) => {
        console.log('Parent item moved from', oldIndex, 'to', newIndex);
      }} />
    </div>
  );
};

export default App;

在这个示例中，我们创建了一个嵌套的可拖拽列表。父列表和子列表都可以进行拖拽操作。

性能优化

在处理大量数据时，拖拽操作可能会导致性能问题。react-sortable-hoc 提供了一些优化选项，可以帮助你提高性能。

1. 使用 `shouldCancelStart` 属性

shouldCancelStart 属性用于指定在什么情况下取消拖拽操作。你可以通过这个属性来避免不必要的拖拽操作。

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} shouldCancelStart={(e) => e.target.tagName.toLowerCase() === 'input'} />
      ))}
    </ul>
  );
});

在这个示例中，如果点击的元素是一个 input 元素，拖拽操作将被取消。

2. 使用 `useWindowAsScrollContainer` 属性

useWindowAsScrollContainer 属性用于指定是否将窗口作为滚动容器。默认情况下，react-sortable-hoc 会将列表的父元素作为滚动容器。如果你希望将窗口作为滚动容器，可以设置这个属性。

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

在这个示例中，窗口将被作为滚动容器。

常见问题

1. 拖拽时元素闪烁

在某些情况下，拖拽时元素可能会出现闪烁。这通常是由于 CSS 样式冲突导致的。你可以尝试为被拖拽的元素添加 position: relative; 样式来解决这个问题。

2. 拖拽时元素位置不正确

如果拖拽时元素的位置不正确，可能是由于 transform 样式冲突导致的。你可以尝试为被拖拽的元素添加 transform: none; 样式来解决这个问题。

3. 拖拽时元素无法移动

如果拖拽时元素无法移动，可能是由于 pointer-events 样式冲突导致的。你可以尝试为被拖拽的元素添加 pointer-events: none; 样式来解决这个问题。

总结

react-sortable-hoc 是一个功能强大且易于使用的拖拽排序组件库。通过本文的介绍，你应该已经掌握了如何使用 react-sortable-hoc 来实现各种拖拽排序功能。无论是简单的列表还是复杂的嵌套结构，react-sortable-hoc 都能帮助你轻松实现。希望本文对你有所帮助，祝你在使用 react-sortable-hoc 时取得成功！

react拖拽组件react-sortable-hoc如何使用

React拖拽组件react-sortable-hoc如何使用

目录

简介

安装

基本用法

1. 创建一个可拖拽的列表

2. 处理拖拽结束事件

自定义拖拽手柄

1. 使用 `distance` 属性

2. 使用 `pressDelay` 属性

3. 自定义拖拽手柄

限制拖拽方向

1. 限制为水平方向

2. 限制为垂直方向

拖拽时的样式

1. 使用 `helperClass` 属性

2. 使用 `helperContainer` 属性

拖拽时的回调函数

1. `onSortStart`

2. `onSortMove`

3. `onSortEnd`

嵌套拖拽

性能优化

1. 使用 `shouldCancelStart` 属性

2. 使用 `useWindowAsScrollContainer` 属性

常见问题

1. 拖拽时元素闪烁

2. 拖拽时元素位置不正确

3. 拖拽时元素无法移动

总结

相关阅读

react拖拽组件react-sortable-hoc如何使用

React拖拽组件react-sortable-hoc如何使用

目录

简介

安装

基本用法

1. 创建一个可拖拽的列表

2. 处理拖拽结束事件

自定义拖拽手柄

1. 使用 distance 属性

2. 使用 pressDelay 属性

3. 自定义拖拽手柄

限制拖拽方向

1. 限制为水平方向

2. 限制为垂直方向

拖拽时的样式

1. 使用 helperClass 属性

2. 使用 helperContainer 属性

拖拽时的回调函数

1. onSortStart

2. onSortMove

3. onSortEnd

嵌套拖拽

性能优化

1. 使用 shouldCancelStart 属性

2. 使用 useWindowAsScrollContainer 属性

常见问题

1. 拖拽时元素闪烁

2. 拖拽时元素位置不正确

3. 拖拽时元素无法移动

总结

相关阅读

1. 使用 `distance` 属性

2. 使用 `pressDelay` 属性

1. 使用 `helperClass` 属性

2. 使用 `helperContainer` 属性

1. `onSortStart`

2. `onSortMove`

3. `onSortEnd`

1. 使用 `shouldCancelStart` 属性

2. 使用 `useWindowAsScrollContainer` 属性