Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
Jun 16, 2020
Aug 7, 2018
Jun 16, 2020

README.md

react-native-drag-sort

Drag and drop sort control for react-native

GitHub license npm

Version Iteration

Installation

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

export { DragSortableView, AutoDragSortableView }

Performance(GIF)

AutomaticSlidingOnePage AutomaticSlidingThreePage
ScrollFixedAddPage DragDeletePage
dragdelete.gif
SortAndFixedPage OneRowsPage
ezgif.com-resize.gif one-line.gif

API

AutoDragSortableView、DragSortableView
  • dataSource: PropTypes.array.isRequired :

  • parentWidth: PropTypes.number //parent width

  • childrenHeight: PropTypes.number.isRequired, //Each item height

  • childrenWidth: PropTypes.number.isRequired,//Each item width

  • marginChildrenTop: PropTypes.number, //So the item's outermost view adds margin, you can only use this method.

  • marginChildrenBottom: PropTypes.number,

  • marginChildrenLeft : PropTypes.number,

  • marginChildrenRight : PropTypes.number,

  • sortable: PropTypes.bool, //Do not allow dragging

  • onClickItem: PropTypes.func, //click

  • onDragStart: PropTypes.func,

  • onDragEnd : PropTypes.func,

  • onDataChange : PropTypes.func, //This method is called every time the data changes.

  • renderItem : PropTypes.func.isRequired, //render item view

  • fixedItems:PropTypes.array //no remove

  • keyExtractor: keyExtractor: PropTypes.func //(item,index) => key

  • delayLongPress: PropTypes.number,

  • isDragFreely: PropTypes.bool, // Whether to limit the drag space

  • onDragging: PropTypes.func

  • maxScale: PropTypes.number;

  • minOpacity: PropTypes.number;

The following attributes belong only to AutoDragSortableView
  • scaleDuration: PropTypes.number;
  • slideDuration: PropTypes.number;
  • autoThrottle: PropTypes.number;
  • autoThrottleDuration: PropTypes.number;
  • renderHeaderView: PropTypes.element,
  • headerViewHeight: PropTypes.number,
  • renderBottomView: PropTypes.element,
  • bottomViewHeight: PropTypes.number,

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)
    }}
/>

You can’t perform that action at this time.