https://github.com/educastellano/react-sortable-dnd
React component to sort any element with DnD
https://github.com/educastellano/react-sortable-dnd
dnd drag-and-drop react react-sortable sortable
Last synced: about 2 months ago
JSON representation
React component to sort any element with DnD
- Host: GitHub
- URL: https://github.com/educastellano/react-sortable-dnd
- Owner: educastellano
- Created: 2016-04-08T14:21:36.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-22T12:01:35.000Z (almost 8 years ago)
- Last Synced: 2025-02-02T00:46:23.909Z (4 months ago)
- Topics: dnd, drag-and-drop, react, react-sortable, sortable
- Language: JavaScript
- Homepage:
- Size: 302 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-sortable-dnd
A React component to sort elements of any type. It also supports dropping external elements in any position.
> [Demo](http://educastellano.github.io/react-sortable-dnd)
## Install
```
npm i react-sortable-dnd --save
```
## Usage
```html
console.log(components)}>
Apple
Mango
Pineapple
```
## Props
Prop | Type/Options | Default | Description
--- | --- | --- | ---
`className` | *string* | `Sortable` | **`Optional`** The class name of the component
`classPlaceholder` | *string* | `Placeholder` | **`Optional`** The class name of the placeholder component when dragging external elements.
`enabled` | *boolean* | `true` | **`Optional`** Enable/disable the sorting
`type` | *string* | `` | **`Optional`** Type of the elements to sort, in case you want to restrict elements of other Sortable lists.
## Event Props
Prop | Parameters | Description
--- | --- | ---
`onSort` | *(components)* | The sorting callback function.
`onSortStart` | *(components)* | Triggered when an element starts being dragged.
`onDrop` | *(e, data, index)* | **`Optional`** Called when an external element is dropped.
## Changelog
* 1.0.0
* Initial release :tada:
## License
[ISC License](http://opensource.org/licenses/ISC)