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

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

目錄

1. 簡介
2. 安裝
3. 基本用法
4. 自定義拖拽手柄
5. 限制拖拽方向
6. 拖拽時的樣式
7. 拖拽時的回調函數
8. 嵌套拖拽
9. 性能優化
10. 常見問題
11. 總結

簡介

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 時取得成功！