一套更高级的组件,将任何列表变成动画,可访问和易触摸的可排序列表

现有实例: http://clauderic.github.io/ react-sortable-hoc/ (中文(简体) )

特征

• 高级顺序组件 - 与您的现有组件结合
• 拖动手柄,自动滚动,锁定轴,事件等等!
• Suuper平滑动画 追寻60FPS的梦想
• 虚拟化图书馆的工作: 反应虚拟化, (中文(简体) ), 反应- tiny- 虚拟列表, (中文(简体) ), 无限反应等 (中文(简体) ).
• 水平列表、 垂直列表或网格 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
• 触摸辅助 👌
• 可访问性:支持键盘排序

安装

使用 无数字 :

$ npm install react-sortable-hoc --save

然后,使用支持通用JS或ES2015模块的模块捆绑器,例如 网络软件包数字 :

// Using an ES6 transpiler like Babel
import {SortableContainer, SortableElement} from 'react-sortable-hoc';

// Not using an ES6 transpiler
var Sortable = require('react-sortable-hoc');
var SortableContainer = Sortable.SortableContainer;
var SortableElement = Sortable.SortableElement;

另外,还设有一个UMD大楼:

<script src="react-sortable-hoc/dist/react-sortable-hoc.umd.js"></script>

使用量

基本示例

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

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

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

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent />, document.getElementById('root'));

就这样! React Sortable 默认不会出现任何样式,因为它意在增强您现有的组件.

提供更多代码示例 这里。 。 。 .

我为什么要用这个?

已经有一些伟大的拖放库(例如, 反应-dnd 简直太棒了 如果这些图书馆符合你的需要,你肯定应该先尝试一下。 然而,这些库大多依赖于HTML5 Drag & Drop API,它有一些严重的局限性. 例如,如果需要支持触摸设备,如果需要锁定被拖到轴上,或者想要在节点被排序时使它们动起来,那么事情会很快变得棘手. 反应可排序的HOC旨在提供一套简单的更高级的组件来填补这些空白. 如果你在寻找一种死板的,方便移动的方式,将可分类的功能添加到您的列表中,那么你的位置是正确的.

道具类型

可排序容器 HOC

* 联合国 OffsetValue 也可以是有限的 Number 或一个 String 由数字和一个单位组成(px 或者说 %) (中文(简体) ). 实例: 10 (这与 "10px", (中文(简体) ), "50%"

可分类的元素HOC

财务问题

运行示例

在根文件夹中,运行以下命令以启动 React Story Book :

$ npm install
$ npm start

无障碍

反应排序 HOC 支持键盘排序出框. 为了启动它,确保你 SortableElement 或者说 SortableHandle 可聚焦。 可以通过设置 tabIndex={0} 在您正在加固的组件所制取的最外端 HTML 节点上 SortableElement 或者说 SortableHandle。 。 。 .

一旦某个项目被聚焦/拖入,按 SPACE 捡起来, ArrowUp 或者说 ArrowLeft 在列表中向后移动一个位置, ArrowDown 或者说 ArrowRight 在列表中向前移动一个位置, 按 SPACE 重新将项目丢入新位置。 按键 ESC 在项目被丢弃之前, 将取消排序操作 .

网格支持

需要按网格排序吗? 我们掩护你! 刚刚设置 axis 向 xy. 网格支持目前仅限于一个设置,其中网格中的所有单元格都具有相同的宽度和高度,尽管我们正在努力在不久的将来获得可变宽度支持.

项目在排序/ CSS 问题时消失

在排序时, react-sortable-hoc 创建您所排序的元素的克隆( 即 可排序助手并附在结尾 <body> 标签。 原始元素会仍然处于位置,以保持其在 DOM 中的位置,直到拖放结束(带有内置样式使其隐形). 如果 可排序助手 从CSS的角度上被搅乱了,认为也许你选择可拖动项目的人依赖于一个已经不存在的父元素(因为 可排序助手 位于 <body>) (中文(简体) ). 这也可以是一个 z-index 问题,例如当使用时 react-sortable-hoc 在一个靴子模式, 你需要增加 z-index 可排序帮助工具的上方显示(参见 87号 详情请查阅.

点击正在吞咽的事件

默认, react-sortable-hoc 立即被触发 mousedown. 如果你想防止这种行为,有很多策略是随时可用的. 你可以用这个 distance 设置一个最小距离( 以像素计) 的道具, 在启用排序前被拖曳 。 你也可以使用这个 pressDelay 启用排序前添加延迟的道具 。 或者,您还可以使用 可排序的手提箱 万岁.

包装道具没有传递给包裹组件

所有道具都用来 SortableContainer 财务报告和审定财务报表 SortableElement 以上所列被包装件部分故意消耗,且 没有 传给被包裹的部分。 让他们能用另一个名字 传下想要的道具 例如:

const SortableItem = SortableElement(({value, sortIndex}) => (
  <li>
    {value} - #{sortIndex}
  </li>
));

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

依赖关系

反应可排序 HOC 只取决于 无变化。它有以下的相对依赖关系: react, (中文(简体) ), react-dom

报告问题

如果相信你发现了问题,请 报告 以及任何有关细节以复制。 这样做最容易的方法就是叉开 react-sortable-hoc 基本设置沙盒 代码框数字 :

请求帮助

请不要在个人支持申请中使用问题跟踪器。 相反,使用 减肥 或叠叠流.

捐款

是的,请! 特性请求 / 拉动请求是欢迎的 .