React drag & drop highly customizable sortable list component
npm install react-drag-sortableSortable (by drag and drop) list React Component with auto width
===
``sh`
npm install react-drag-sortable
Make a list of elements (array) sortable by drag and drop. Allows to specify a customizable placeholder to be displayed on the drop area.
Allows to customize the style of items at every step (normal, being dragged, placeholder).
The component supports both horizontal and vertical lists. The component uses interact.js for crossbrowser dragging (see http://interactjs.io for more details).
Works with items of variables width (in %) as well as static width.
SUPPORTS IOS AND TOUCH GESTURES (tested on ipad and safari)
Import the component :
`js`
import DragSortableList from 'react-drag-sortable'
Use the component :
`jsx`
You can pass the following properties:
- items: array of items to sort. Each item must be an object with a content property. You can optionally pass an array of classes that will be added to the item. For instance :
`jsx`
var list = [
{content: (test1), classes:['bigger']},
{content: (test2)},
{content: (test3), classes:['bigger']},
{content: (test4)}
];
- type: 'vertical', 'horizontal' or 'grid'
- moveTransitionDuration (number): if a duration is provided, items will animate when they move on drag. The CSS animation's duration is the number provided.
- dropBackTransitionDuration (number): if a duration is provided, the dragged item will go back to its original position when not dropped on a different target. The CSS animation's duration is the number provided.
- placeholder: content to display on drag target. If you don't pass a placeholder, a copy of the dragged item will be displayed. For instance:jsx`
var placeholder = (
PLACEHOLDER
);
- callback function called on drop (when list is sorted). Takes the new sorted list and the latest drop Event as arguments. For instance:js`
var onSort = function(sortedList, dropEvent) {
console.log("sortedList", sortedList, dropEvent);
}jsx`
ReactDOM.render(
The list elements all have a class .draggable
The element being dragged has a class .dragged while it's being dragged
The placeholder has a class .placeholder
For instance, you can customize the style :
`css
.draggable {
background-color: yellow;
margin: 10px;
}
.dragged {
opacity: 0.7;
}
.placeholder {
opacity: 0.5;
}
`
You can mix your custom classes ("classes" property in items list) with these classes for powerful styling.
You will find more complex examples of styling in the example folder.
You can prevent an element of being draggable by adding the class "no-drag". This examples contains a list where the texts are draggable but not the inputs.
`js`
const listWithNoDrag = [
{content: (test1)},
{content: (test2)},
{content: (test3)},
]
ReactDOM.render(
`jsx
require('./stylesheets/styles.scss');
import React from 'react'
import ReactDOM from 'react-dom'
// Components
import DragSortableList from '../src/dragSortableList.jsx'
var placeholder = (
var list = [
{content: (test1), classes:['test', 'bigger']},
{content: (test2), classes:['test']},
{content: (test3), classes:['test']},
{content: (test4), classes:['test', 'bigger']}
];
var listHorizontal = [
{content: (
var listGrid = [
{content: (
var onSort = function(sortedList) {
console.log("sortedList", sortedList);
}
ReactDOM.render(
ReactDOM.render(
ReactDOM.render(
`
The example (containing both vertical and horizontal lists along with more complex styling) can be found in the demo folder and run using webpack with
`sh``
npm run dev
These will be added soon. Please do not hesitate to add some !
I am a full-stack Javascript developer based in Lyon, France.
react-drag-sortable is dual licensed under the MIT license and GPL.
For more information click here.