react-sortablejs

What is react-sortablejs?

react-sortablejs is a React wrapper for the SortableJS library, which provides drag-and-drop functionality for lists and grids. It allows for easy reordering of items within a list or grid, with support for various customization options and event handling.

What are react-sortablejs's main functionalities?

Basic Drag-and-Drop

This feature allows you to create a simple drag-and-drop list. The items in the list can be reordered by dragging and dropping.

import React from 'react';
import Sortable from 'react-sortablejs';

const SimpleList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  return (
    <Sortable tag="ul">
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </Sortable>
  );
};

export default SimpleList;

Handling Events

This feature demonstrates how to handle events such as the end of a drag-and-drop action. The `onEnd` event handler logs the event details when an item is moved.

import React from 'react';
import Sortable from 'react-sortablejs';

const EventHandlingList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const handleEnd = (evt) => {
    console.log('Item moved:', evt);
  };

  return (
    <Sortable tag="ul" onEnd={handleEnd}>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </Sortable>
  );
};

export default EventHandlingList;

Custom Drag Handle

This feature allows you to specify a custom handle for dragging items. In this example, only the elements with the class `handle` can be used to drag the list items.

import React from 'react';
import Sortable from 'react-sortablejs';

const CustomHandleList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  return (
    <Sortable tag="ul" handle=".handle">
      {items.map((item, index) => (
        <li key={index}>
          <span className="handle">::</span> {item}
        </li>
      ))}
    </Sortable>
  );
};

export default CustomHandleList;

Other packages similar to react-sortablejs

react-beautiful-dnd

react-beautiful-dnd is a drag-and-drop library for React that focuses on providing a beautiful and accessible drag-and-drop experience. It offers more advanced features like automatic scrolling and customizable drag handles. Compared to react-sortablejs, it provides a more polished user experience but may have a steeper learning curve.

react-dnd

react-dnd is a flexible drag-and-drop library for React that is built on top of the HTML5 drag-and-drop API. It provides a more low-level API compared to react-sortablejs, allowing for greater customization and control over the drag-and-drop interactions. It is suitable for more complex use cases where fine-grained control is required.

react-draggable

react-draggable is a library for making elements draggable in React. It is more focused on providing basic drag-and-drop functionality for individual elements rather than lists or grids. It is simpler and more lightweight compared to react-sortablejs, making it a good choice for basic drag-and-drop needs.

README

react-sortable

A higher order React component for Sortable.

Installation

npm install --save react-sortablejs

Options

ref option

Specify which items inside the ref attribute should be sortable.

model option

The state attribute for creating a sortable list.

See more options at https://github.com/RubaXa/Sortable#options

{
    ref: 'list',
    model: 'items',
    onStart: 'handleStart',
    onEnd: 'handleEnd',
    onAdd: 'handleAdd',
    onUpdate: 'handleUpdate',
    onRemove: 'handleRemove',
    onSort: 'handleSort',
    onFilter: 'handleFilter',
    onMove: 'handleMove',
    // Sortable options
    group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
    sort: true,  // sorting inside list
    delay: 0, // time in milliseconds to define when the sorting should start
    disabled: false, // Disables the sortable if set to true.
    store: null,  // @see Store
    animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
    handle: ".my-handle",  // Drag handle selector within list items
    filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
    draggable: ".item",  // Specifies which items inside the element should be sortable
    ghostClass: "sortable-ghost",  // Class name for the drop placeholder
    chosenClass: "sortable-chosen",  // Class name for the chosen item
    dataIdAttr: 'data-id',
    forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
    fallbackClass: "sortable-fallback"  // Class name for the cloned DOM Element when using forceFallback
    fallbackOnBody: false  // Appends the cloned DOM Element into the Document's Body
    scroll: true, // or HTMLElement
    scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
    scrollSpeed: 10, // px
    setData: function (dataTransfer, dragEl) {
        dataTransfer.setData('Text', dragEl.textContent);
    }
}

Usage

import React from 'react';
import SortableMixin from 'react-sortablejs';

const sortableOptions = {
    ref: 'list',
    model: 'items'
};

class MySortableComponent extends React.Component {
    state = {
        items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
    
    handleStart(evt) { // Dragging started
    }
    handleEnd(evt) { // Dragging ended
    }
    handleAdd(evt) { // Element is dropped into the list from another list
    }
    handleUpdate(evt) { // Changed sorting within list
    }
    handleRemove(evt) { // Element is removed from the list into another list
    }
    handleSort(evt) { // Called by any change to the list (add / update / remove)
    }
    handleFilter(evt) { // Attempt to drag a filtered element
    }
    handleMove(evt) { // Event when you move an item in the list or between lists
    }
    render() {
        const items = this.state.items.map((text, index) => (
            <li key={index}>{text}</li>
        ));
        
        return (
            <div>
                <ul ref="list">{items}</ul>
            </div>
        );
    }
}

export default SortableMixin(MySortableComponent, sortableOptions);

Examples

Using the group option to drag elements from one list into another.

File: index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Sortable1 from './sortable1';
import Sortable2 from './sortable2';

const SortableList = (props) => {
    return (
        <div>
            <Sortable1 />
            <hr />
            <Sortable2 />
        </div>
    );
};

ReactDOM.render(<SortableList />, document.body);

File: sortable1.jsx

import React from 'react';
import SortableMixin from 'react-sortablejs';

class Sortable1 extends React.Component {
    state = {
        items: [0, 1, 2, 3, 4]
    };

    render() {
        let items = this.state.items.map((text, index) => {
            return <li key={index}>{text}</li>;
        });

        return (
            <div>
                <ul ref="list">{items}</ul>
            </div>
        );
    }
}

export default SortableMixin(Sortable1, { group: 'shared' });

File: sortable2.jsx

import React from 'react';
import SortableMixin from 'react-sortablejs';

class Sortable2 extends React.Component {
    state = {
        items: [5, 6, 7, 8, 9]
    };

    render() {
        let items = this.state.items.map((text, index) => {
            return <li key={index}>{text}</li>;
        });

        return (
            <div>
                <ul ref="list">{items}</ul>
            </div>
        );
    }
}

export default SortableMixin(Sortable2, { group: 'shared' });