ray-hoc-sortable (HOC)

install

npm install ray-hoc-sortable --save

Usage

// Using an ES6 transpiler like Babel
import { withSortableView, withSortableItem, withSortableBar, exchangeData } from 'ray-hoc-sortable';

// Not using an ES6 transpiler
const Sortable = require('ray-hoc-sortable');
const withSortableView = Sortable.withSortableView;
const withSortableItem = Sortable.withSortableItem;
const withSortableBar = Sortable.withSortableBar;
const exchangeData = Sortable.exchangeData;

Basic Example

import React, { Component } from 'react';
import { render } from 'react-dom';
import { withSortableView, withSortableItem, exchangeData } from 'ray-hoc-sortable';

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

const SortableList = withSortableView(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} 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: exchangeData(this.state.items, oldIndex, newIndex),
    });
  };

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

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

Prop Types

withSortableView HOC

| Property | Type | Default | Description | | ------ | ------ | ------ | ------ | | axis | String | y | 在网格中的排序方式，可以是 x, y or xy | | lockAxis | String | - | 锁定排序移动的轴，可选值为 x、y. 这是 HTML5 Drag & Drop 不具备的功能。 | | helperClass | String | - | 自定义样式名 | | transitionDuration | Number | 300 | 元素移动位置时持续时间。设置为 0 则禁用缓动时间 | | pressDelay| Number | 0 | 按下一定时间后执行排序，移动设备设置 200 最佳，不能与“distance”属性一起使用。 | | pressThreshold | Number | 5 | 忽略移动的像素值，默认为 5px . | | distance | Number | 0 | 移动一定距离之后进行排序，不能与 pressDelay 一同使用.| | shouldCancelStart | Function | Function | 执行排序之前调用，常用作取消排序，例如，默认情况下当事件目标是 input, textarea, select or option 时，将取消排序. | | onSortStart | Function | | 开始排序时的回调函数. function({node, index, collection}, event) | | onSortMove | Function| - | 移动过程中的回调. function(event) | | onSortEnd | Function | | 排序结束时回调. function({oldIndex, newIndex, collection}, e) | | useDragHandle | Boolean| false | 使用 headerBar 进行拖拽。当使用 withSortableBar 时，需要设置为 true | | useWindowAsScrollContainer | Boolean| false | 将 window 设置为滚动容器 | | hideSortableGhost | Boolean| true| 是否隐藏重影元素，默认情况自动隐藏当前正在排序的元素，使用自定义样式时，设置为 false | | lockToContainerEdges | Boolean| false | 将排序区域锁定为父元素，父元需要使用 withSortableView 进行包裹 | | lockOffset| OffsetValue or [OffsetValue, OffsetValue] | "50%" | 当 lockToContainerEdges 为 true 时，可以设置与父元素上下编边距，百分比值相对于当前正在排序项的高度，如果顶部与底部不同，则传入数组 ["0%", "100%"] 实现。| | getContainer | Function | - | 指定自定义容器对象，需要返回滚动容器元素（DOM Element），默认为 withSortableView 元素自身，如果 useWindowAsScrollContainer 为 true，则为 window。 | | getHelperDimensions | Function | Function | function({node, index, collection}) 返回计算维度 | | helperContainer | HTMLElement or Function | document.body | 默认情况下，克隆的可排序 helper 附加到页面中。该 props 为 helper 指定一个不同的容器。可以是一个 HTMLElement 或一个返回 HTMLElement 的函数，该函数将在排序开始之前调用 | | disableAutoscroll | Boolean | false | 拖动时是否禁用自动滚动 |

OffsetValue String类型或者 Number类型，单位为： (px or %). Examples: 10 同 "10px", "50%" 等。

withSortableItem HOC

| Property | Type | Default | Required? | Description | | ------ | ------ | ------ | ------ | ------ | | index | Number| | ✓ | 元素集合的 index 值 | | collection | Number or String | 0 | - | 元素所属集合. 同一个 withSortableView 中有多组可排序元素时使用。 | | disabled | Boolean | false | - | 禁用元素排序 | | getNode | func: (tarNode: HTMLElement) => HTMLElement | - | - | 调整指定的排序 node 节点 |

changlog

2022-2-21 v1.0.9

修改 onSortStart 回调中，collection 为 undefined bug

2020-6-22 v1.0.6

添加 zindex 值，以防外部容器设置 zindex 时，导致无法显示 item