react-native-drag-sort

Drag and drop sort control for react-native

Version Iteration

• English Version Iteration
• 中文版本迭代

Installation

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

export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }

Tip

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.

Performance（GIF）

AnyThreePage	AnyThreePage

AutomaticSlidingOnePage	AutomaticSlidingThreePage

ScrollFixedAddPage	DragDeletePage

SortAndFixedPage	OneRowsPage

API

AutoDragSortableView、DragSortableView

isRequired if there is a * in the name field

The following attributes belong only to AutoDragSortableView

AnySizeDragSortableView

Example

<DragSortableView
    dataSource={this.state.data}
    parentWidth={parentWidth}
    childrenWidth= {childrenWidth}
    childrenHeight={childrenHeight}
    keyExtractor={(item,index)=> item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>
    
<AutoDragSortableView
    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()
}

<AnySizeDragSortableView
    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 (
    	<TouchableOpacity
	        onLongPress={() => {
	            this.sortableViewRef.current.startTouch(item, index) // 2、isRequired	        }}
	        onPressOut = {() => {
	        	this.sortableViewRef.current.onPressOut() 3、isRequired
	        }}
	      >
      	<...>
      </TouchableOpacity>
    )
}


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