react-native-drag-sort

Drag and drop sort control for react-native

!GitHub license

$3

- English Version Iteration
- 中文版本迭代

$3

``bash
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save

export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }
`

$3

> Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView

- 1、If the width and height are fixed and there is no need to slide, use DragSortableView.
- 2、If the width and height are fixed and you need to slide, use AutoDragSortableView.
- 3、If the width and height are arbitrary and need to slide, please use AnySizeDragSortableView.

$3

AnyThreePage | AnyThreePage
| ------ | ----------- |
!Anysize | !Anysize

AutomaticSlidingOnePage | AutomaticSlidingThreePage
| ------ | ----------- |
| ![](https://user-gold-cdn.xitu.io/2020/2/15/170487f5ce137e15?w=240&h=514&f=gif&s=2527386) | ![](https://user-gold-cdn.xitu.io/2020/2/15/1704896e0729f8b7?w=240&h=514&f=gif&s=4958289)

ScrollFixedAddPage | DragDeletePage
| ------ | ----------- |
| ![](https://user-gold-cdn.xitu.io/2020/2/10/1702ea81299f097d?w=240&h=400&f=gif&s=863218) | !dragdelete.gif


SortAndFixedPage | OneRowsPage
| ------ | ----------- |
| !ezgif.com-resize.gif | !one-line.gif

$3

#### AutoDragSortableView、DragSortableView

isRequired if there is a * in the name field

|name|Proptypes|Description|
----|----|-----|
|dataSource *|array|
|parentWidth|number|parent width
|childrenHeight *|number|Each item height
|childrenWidth *|number|Each item width
|marginChildrenTop|number|So the item's outermost view adds margin, you can only use this method.
|marginChildrenBottom|number
|marginChildrenLeft|number
|marginChildrenRight|number
|sortable|bool|Do not allow dragging
|onClickItem|func|click
|onDragStart|func
|onDragEnd|func
|onDataChange|func|This method is called every time the data changes.
|renderItem *|func|render item view
|fixedItems|array|no remove
|keyExtractor|func|(item,index) => key
|delayLongPress|number
|isDragFreely|bool|Whether to limit the drag space
|onDragging|func
|maxScale|number
|minOpacity|number

#### The following attributes belong only to AutoDragSortableView

|name|Proptypes|Description|
----|----|-----|
|scaleDuration|number
|slideDuration|number
|autoThrottle|number
|autoThrottleDuration|number
|renderHeaderView|element
|headerViewHeight|number
|scrollIndicatorInsets|({top:number, left:number, bottom:number, right:number})|
|renderBottomView|element
|bottomViewHeight|number
|onScrollListener | (event: NativeSyntheticEvent) => void
|onScrollRef | (ref: any) => void

##### AnySizeDragSortableView

|name|Proptypes|Description|
----|----|-----|
|dataSource *|array|
|keyExtractor|func.isRequired|(item,index) => key
|renderItem *|func|render item view
|onDataChange|func|This method is called every time the data changes.
|renderHeaderView|element
|headerViewHeight|number
|renderBottomView|element
|bottomViewHeight|number
|autoThrottle|number
|autoThrottleDuration|number
|onDragEnd|func
|scrollIndicatorInsets|({top:number, left:number, bottom:number, right:number})|
|onScrollListener | (event: NativeSyntheticEvent) => void
|onScrollRef | (ref: any) => void
|areaOverlapRatio|number| Must be greater than 0.5
|movedWrapStyle| StyleProp |style
|childMarginTop|number
|childMarginBottom|number
|childMarginLeft|number
|childMarginRight|number

$3

`jsx
dataSource={this.state.data}
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
keyExtractor={(item,index)=> item.id}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}
/>

dataSource={this.state.data}
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
keyExtractor={(item,index)=> item.id}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}
/>

// ====== AnySizeDragSortableView start =======

constructor(props) {
super(props);
this.sortableViewRef = createRef()
}

ref={this.sortableViewRef}
dataSource={items}
keyExtractor={(item) => item.text} // 1、isRequired
renderItem={this._renderItem}
onDataChange={(data, callback)=> {
this.setState({items: data},()=>{
callback() // isRequired
})
}}
/>

_renderItem = (item, index, isMoved) => {
return (
onLongPress={() => {
this.sortableViewRef.current.startTouch(item, index) // 2、isRequired }}
onPressOut = {() => {
this.sortableViewRef.current.onPressOut() 3、isRequired
}}
>
<...>

)
}


// ====== AnySizeDragSortableView end =======
``