mochixuan / React Native Drag Sort
Licence: apache-2.0
🔥🔥🔥Drag and drop sort control for react-native
Stars: ✭ 397
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Drag Sort
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+5854.91%)
Mutual labels: sort, drag-and-drop, drag, sortable
dnd
Beautiful and accessible drag and drop for lists with React.
Stars: ✭ 271 (-31.74%)
Mutual labels: drag-and-drop, drag, sortable
React Beautiful Dnd
Beautiful and accessible drag and drop for lists with React
Stars: ✭ 25,810 (+6401.26%)
Mutual labels: drag-and-drop, drag, sortable
Smooth Dnd
drag and drop library for javascript
Stars: ✭ 408 (+2.77%)
Mutual labels: drag-and-drop, drag, sortable
Angular Skyhook
An implementation of react-dnd for Angular.
Stars: ✭ 146 (-63.22%)
Mutual labels: drag-and-drop, drag, sortable
Vue Smooth Dnd
Vue wrapper components for smooth-dnd
Stars: ✭ 1,121 (+182.37%)
Mutual labels: drag-and-drop, drag, sortable
Dnd Kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Stars: ✭ 3,456 (+770.53%)
Mutual labels: sortable, drag-and-drop, drag
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+292.95%)
Mutual labels: drag-and-drop, drag, sortable
Ngx Smooth Dnd
angular wrapper for smooth-dnd
Stars: ✭ 152 (-61.71%)
Mutual labels: drag-and-drop, drag, sortable
Table Dragger
Turn your old table to drag-and-drop table with columns and rows sorting like magic!
Stars: ✭ 704 (+77.33%)
Mutual labels: sort, drag, sortable
wp-tag-order
↕︎ Sort tags manually in individual posts (not site-globally) on WordPress.
Stars: ✭ 16 (-95.97%)
Mutual labels: drag-and-drop, sort
el-table-draggable
让element-ui的table可拖动排序,支持 行，列，跨表格等特性
Stars: ✭ 68 (-82.87%)
Mutual labels: drag-and-drop, drag
vue-dnd-zone
vue.js plugin for drag and drop functionality
Stars: ✭ 144 (-63.73%)
Mutual labels: drag-and-drop, sortable
reactablejs
A react high-order component for interact.js(drag and drop, resizing and multi-touch gestures).
Stars: ✭ 59 (-85.14%)
Mutual labels: drag-and-drop, drag
KanbanDragDropiOS
Kanban Board using Drag & Drop iOS API
Stars: ✭ 95 (-76.07%)
Mutual labels: drag-and-drop, drag
TKinterDesigner
TKinterDesigner is a tool software to develop the Python User Interface for Python programmer.
Stars: ✭ 663 (+67%)
Mutual labels: drag-and-drop, drag
zero-drag
Minimal abstraction of DOM drag-and-drop interactions
Stars: ✭ 17 (-95.72%)
Mutual labels: drag-and-drop, sortable
solid-dnd
A lightweight, performant, extensible drag and drop toolkit for Solid JS.
Stars: ✭ 251 (-36.78%)
Mutual labels: drag-and-drop, drag
dflex
The sophisticated Drag and Drop library you've been waiting for 🥳
Stars: ✭ 806 (+103.02%)
Mutual labels: drag-and-drop, sortable
react-native-drag-sort
Drag and drop sort control for react-native
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 |
|---|---|
 |
| SortAndFixedPage | OneRowsPage |
|---|---|
 |
 |
API
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 |
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)
}}
/>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].