sortable list
npm install ray-hoc-sortable``bash`
npm install ray-hoc-sortable --save
`js
// 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;
`
`js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { withSortableView, withSortableItem, exchangeData } from 'ray-hoc-sortable';
const SortableItem = withSortableItem(({value}) =>
const SortableList = withSortableView(({items}) => {
return (
} index={index} value={value} />
))}
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
}
}
render(
`
#### withSortableView HOC
| Property | Type | Default | Description |
| ------ | ------ | ------ | ------ |
| axis | String | y | 在网格中的排序方式，可以是 x, y or xy |x
| lockAxis | String | - | 锁定排序移动的轴，可选值为 、y. 这是 HTML5 Drag & Drop 不具备的功能。 |300
| helperClass | String | - | 自定义样式名 |
| transitionDuration | Number | | 元素移动位置时持续时间。设置为 0 则禁用缓动时间 |0
| pressDelay| Number | | 按下一定时间后执行排序，移动设备设置 200 最佳，不能与“distance”属性一起使用。 |5
| pressThreshold | Number | | 忽略移动的像素值，默认为 5px . |0
| distance | Number | | 移动一定距离之后进行排序，不能与 pressDelay 一同使用.|input
| shouldCancelStart | Function | Function | 执行排序之前调用，常用作取消排序，例如，默认情况下当事件目标是 , textarea, select or option 时，将取消排序. |function({node, index, collection}, event)
| onSortStart | Function | | 开始排序时的回调函数. |function(event)
| onSortMove | Function| - | 移动过程中的回调. |function({oldIndex, newIndex, collection}, e)
| onSortEnd | Function | | 排序结束时回调. |false
| useDragHandle | Boolean| | 使用 headerBar 进行拖拽。当使用 withSortableBar 时，需要设置为 true |false
| useWindowAsScrollContainer | Boolean| | 将 window 设置为滚动容器 |true
| hideSortableGhost | Boolean| | 是否隐藏重影元素，默认情况自动隐藏当前正在排序的元素，使用自定义样式时，设置为 false |false
| lockToContainerEdges | Boolean| | 将排序区域锁定为父元素，父元需要使用 withSortableView 进行包裹 |OffsetValue or [OffsetValue, OffsetValue]
| lockOffset| | "50%" | 当 lockToContainerEdges 为 true 时，可以设置与父元素上下编边距，百分比值相对于当前正在排序项的高度，如果顶部与底部不同，则传入数组 ["0%", "100%"] 实现。|withSortableView
| getContainer | Function | - | 指定自定义容器对象，需要返回滚动容器元素（DOM Element），默认为 元素自身，如果 useWindowAsScrollContainer 为 true，则为 window。 |function({node, index, collection})
| getHelperDimensions | Function | Function | 返回计算维度 |HTMLElement or Function
| helperContainer | | 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 中有多组可排序元素时使用。 |false
| disabled | Boolean | | - | 禁用元素排序 |func: (tarNode: HTMLElement) => HTMLElement
| getNode | | - | - | 调整指定的排序 node 节点 |
clone node 添加自定义样式 r-sortable-clone-node
修改 onSortStart 回调中，collection 为 undefined` bug
添加 zindex 值，以防外部容器设置 zindex 时，导致无法显示 item