React Bootstrap Sortable

React Sortable - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React bootstrap sortable plugin is an extension that allows you to move, reorder, sort and organize elements on your website by using drag and drop functionality.

React sortable plugin can be used on smartphones and provides an opportunity to sort elements using keyboard.

To see the list of all properties and methods of the plugin see "API" tab on this page.

Sorting By The "Y" Axis

Change the order of elements by the "y" axis in the DOM tree by dragging the element.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import "./index.css";
        
        const Item = (props) => `Item ${props.title}`;
        
        function App() {
          const items = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        
          const renderedItems = items.map((item) => {
            return <Item title={item} />;
          });
        
          return (
            <div>
              <MDBSortable
                axis="y"
                items={renderedItems}
                itemClassName="SortableItem"
              />
            </div>
          );
        }
        
        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }

Sorting By The "X" Axis

Change the order of elements by the "x" axis in the DOM tree by dragging the element.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import './index.css';
        
        const Item = props => `Item ${props.title}`;
        
        function App() {
          const items = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        
          const renderedItems = items.map(item => {
            return <Item title={item} />;
          });
        
          return (
              <div>
                  <MDBSortable
                    axis="x"
                    items={renderedItems}
                    itemClassName="SortableItem"
                    listClassName="SortableList"
                  />
                </div>
          );
        }
        
        export default App;

        
            
        .SortableItem {
          font-size: 1rem;
          padding: 15px 20px;
          list-style: none;
          background-color: #007bff;
          color: #fff;
          margin: 2px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          cursor: move;
        }
        
        .SortableList {
          display: flex;
        }

Lock axis

You can lock movement to an axis while sorting.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import "./index.css";
        
        const Item = (props) => `Item ${props.title}`;
        
        function App() {
          const items = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        
          const renderedItems = items.map((item) => {
            return <Item title={item} />;
          });
        
          return (
            <div>
              <MDBSortable
                axis="y"
                lockAxis="y"
                items={renderedItems.slice(0, 3)}
                itemClassName="SortableItem"
              />
              <MDBSortable
                axis="x"
                lockAxis="x"
                items={renderedItems}
                itemClassName="SortableItem"
                listClassName="SortableList"
              />
            </div>
          );
        }
        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }
  
      .SortableList {
        display: flex;
      }

Display as grid

Displays items in a sortable grid - this can be used to determine the order in which photos or files are uploaded.
To avoid incorrect display of elements useWindowAsScrollContainer property should be set to false and items container width should be set to minimum required for items.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import "./index.css";
        
        const Item = (props) => `Item ${props.title}`;
        
        function App() {
          const items = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        
          const renderedItems = items.map((item) => {
            return <Item title={item} />;
          });
        
          return (
            <div>
              <MDBSortable
                axis="xy"
                items={renderedItems}
                itemClassName="SortableItem"
                listClassName="SortableList"
              />
            </div>
          );
        }
        
        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: move;
      }

      .SortableList {
        width: 450px;
        display: grid;
        grid-template-rows: repeat(3, 150px);
        grid-template-columns: repeat(3, 150px);
      }

Include / exclude items

It is possible to exclude items from the possibility of sorting or dragging items before / after them.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import "./index.css";
        
        const Item = (props) => `Item ${props.title}`;
        
        function App() {
          const items = [
            {
              title: "1",
              disabled: false,
            },
            {
              title: "2",
              disabled: true,
            },
            {
              title: "3",
              disabled: false,
            },
          ];
        
          const disabledItems = items.map((item) => (
            <Item title={item.title} disabled={item.disabled} />
          ));
        
          return (
            <div>
              <MDBSortable
                axis="y"
                items={disabledItems}
                itemClassName="SortableItem"
                disabledClassName="disabled"
              />
            </div>
          );
        }
        
        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }
      
      .SortableItem.disabled {
        background-color: #eee;
        color: #333;
      }

Styling sortable element

You can add your own styles to sortable element.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import './index.css';

        const Item = props => `Item ${props.title}`;

        function App() {
          const items = ["1", "2", "3"];

          const renderedItems = items.map(item => {
            return <Item title={item} />;
          });

          return (
            <div>
              <MDBSortable
                helperClass="helperClass"
                axis="y"
                items={renderedItems}
                itemClassName="SortableItem"
              />
            </div>
          );
        }

        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }
    
      .helperClass {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }

Delay before sorting begins

Makes element sortable after being pressed for a certain time.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import './index.css';

        const Item = props => `Item ${props.title}`;

        function App() {
          const items = ["1", "2", "3"];

          const renderedItems = items.map(item => {
            return <Item title={item} />;
          });

          return (
            <div>
              <MDBSortable
                helperClass="helperClass"
                pressDelay={200}
                axis="y"
                items={renderedItems}
                itemClassName="SortableItem"
              />
            </div>
          );
        }

        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }
    
      .helperClass {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }

Enable sorting only after overcoming a given distance

You can make element to only become sortable after being dragged a certain number of pixels.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import './index.css';

        const Item = props => `Item ${props.title}`;

        function App() {
          const items = ["1", "2", "3"];

          const renderedItems = items.map(item => {
            return <Item title={item} />;
          });

          return (
            <div>
              <MDBSortable
                helperClass="helperClass"
                distance={50}
                axis="y"
                items={renderedItems}
                itemClassName="SortableItem"
              />
            </div>
          );
        }

        export default App;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }

      .helperClass {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }

Transition duration

You can set the duration of the transition when elements shift positions.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import './index.css';
        
        const Item = props => `Item ${props.title}`;
        
        function Transition() {
          const defaultItems = ["1", "2", "3"];
        
          const renderedItems = defaultItems.map(item => {
            return <Item title={item} />;
          });
        
          return (
            <div>
              <MDBSortable
                helperClass="helperClass"
                transitionDuration={200}
                axis="y"
                items={renderedItems}
                itemClassName="SortableItem"
              />
            </div>
          );
        }
        
        export default Transition;

        
            
      .SortableItem {
        font-size: 1rem;
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: move;
      }
      
      .helperClass {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }

Keyboard sorting

You can sort your element using keyboard. To enable it, your element should be focused. Then press "space" and use arrow keys. Press "space" again to finish sorting, press "esc" to cancel sorting.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import "./index.css";
        
        const Item = (props) => `Item ${props.title}`;
        
        function App() {
          const items = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        
          const renderedItems = items.map((item) => {
            return <Item title={item} />;
          });
        
          return (
            <div>
              <MDBSortable
                helperClass="helperClass"
                axis="x"
                lockAxis="x"
                items={renderedItems}
                itemClassName="SortableItem"
                listClassName="SortableList"
              />
            </div>
          );
        }
        
        export default App;

        
            
      .SortableItem {
        padding: 15px 20px;
        list-style: none;
        background-color: #007bff;
        color: #fff;
        margin: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1rem;
        cursor: move;
        flex: 1;
      }
      
      .SortableItem:focus {
        border: 1px dotted #eee;
      }
      
      .SortableList {
        display: flex;
      }
      
      .helperClass {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }

Sortable deck of cards

You can pass varied components as an items property for Sortable component.

Show code

        
            
        import React from "react";
        import MDBSortable from "mdb-react-sortable";
        import {
          MDBBtn,
          MDBCard,
          MDBCardBody,
          MDBCardImage,
          MDBCardTitle,
          MDBCardText,
          MDBCol
        } from "mdbreact";
        import './index.css';

        const Card = props => {
          return (
            <MDBCol>
              <MDBCard>
                <MDBCardImage
                  className="img-fluid"
                  src={`https://mdbootstrap.com/img/Photos/Others/images/${[
                    props.index + 1
                  ]}.webp`}
                  waves
                />
                <MDBCardBody>
                  <MDBCardTitle>Card {props.title}</MDBCardTitle>
                  <MDBCardText>
                    Some quick example text to build on the card title and make up the
                    bulk of the card&apos;s content.
                  </MDBCardText>
                  <MDBBtn href="#">MDBBtn</MDBBtn>
                </MDBCardBody>
              </MDBCard>
            </MDBCol>
          );
        };

        function App() {
          const items = [
            {
              title: "1"
            },
            {
              title: "2"
            },
            {
              title: "3"
            }
          ];
          
          const cards = items.map((item, index) => (
            <Card title={item.title} index={index} />
          ));

          return (
            <div>
              <MDBSortable
                axis="xy"
                items={cards}
                listClassName="SortableList"
              />
            </div>
          );
        }

        export default App;

        
                  
      .SortableList{
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 400px);
        justify-content: center;
      }
      
      .helperClass {
        list-style: none;
      }

React Sortable - API

In this section you will find advanced information about the Sortable plugin.

Download

This plugin requires a purchase.
Buy React Sortable Plugin

Imports

Show code

javascript

        
            
          import React from 'react';
          import MDBSortable from 'mdb-react-sortable';

API Reference: Sortable Properties

The table below shows the configuration options of the Sortable component.

Name	Type	Default	Description	Example
`axis`	String	`"y"`	Choose axis for sorting. Possible values: x, y or xy.	`<Sortable axis="y" />`
`disableAutoscroll`	Boolean	`false`	Disables autoscrolling while dragging.	`<Sortable disableAutoscroll={true} />`
`disabledClassName`	String		Adds class to `disabled` element.	`<Sortable disabledClassName="disabledItem" />`
`distance`	Number	`0`	Make elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.	`<Sortable distance={50} />`
`helperClass`	String		Sets a class to the sortable element.	`<Sortable helperClass="helperClass" />`
`helperContainer`	HTMLElement \| Function	`document.body`	Specify a container for the sortable clone to be appended to. Accepts an HTMLElement or a function returning an HTMLElement that will be invoked before right before sorting begins. By default, the cloned sortable helper is appended to the document body.	`<Sortable helperContainer={() => {}} />`
`hideSortableGhost`	Boolean	`true`	Hide the ghost element. By default React Sortable will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.	`<Sortable hideSortableGhost={false} />`
`items`	Component \| Array(Component \| String)		Sets items to be sorted. If you want to render more then one items collection in one Sortable component, you should set property `multipleItems` to true.	`<Sortable items={['1', '2', '3']} />`
`lockAxis`	String		Locks movement to an axis while sorting. Possible values: x or y.	`<Sortable lockAxis="y" />`
`multipleItems`	Boolean		Set it to true when you want render more than one collection in one Sortable component.	`<Sortable multipleItems />`
`pressDelay`	Number	`0`	Makes elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is 200. Cannot be used in conjunction with the distance prop.	`<Sortable pressDelay={200} />`
`transitionDuration`	Number	`300`	Sets duration of the transition when elements shift positions. Set this to 0 if you'd like to disable transitions.	`<Sortable transitionDuration={200} />`
`useWindowAsScrollContainer`	Boolean	`false`	Set the window as the scrolling container.	`<Sortable useWindowAsScrollContainer />`

API Reference: Sortable methods

Name	Parameters	Description	Example
`shouldCancelStart`	`event`	This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an input, textarea, select or option.	`<Sortable shouldCancelStart={() => {}} />`
`onSortEnd`	`obj, e`	Callback that is invoked when sorting ends. function({oldIndex, newIndex, collection, isKeySorting}, e)	`<Sortable onSortEnd={(obj, e) => this.onSortEndHandler(obj, e)} />`
`onSortMove`	`e`	Callback that is invoked during sorting as the cursor moves.	`<Sortable onSortMove={(e) => this.onSortMoveHandler(e)} />`
`onSortOver`	`obj, e`	Callback that is invoked when moving over an item. function({index, oldIndex, newIndex, collection, isKeySorting}, e).	`<Sortable onSortOver={(obj) => this.onSortOverHandler(obj)} />`
`onSortStart`	`obj, e`	Callback that is invoked when sorting begins. function({node, index, collection, isKeySorting}, event).	`<Sortable onSortStart={(obj, e) => this.onSortStartHandler(obj, e)} />`

API Reference: Sortable Items Properties

The table below shows the configuration options of the Sortable Item component.
If you want to render a simple elements such as strings ['1', '2'....] or other and want to set one of the property below, you should wrap your items into any component and pass a property to this compopnent.

Name	Type	Default	Description	Example
`id`	Number	`index`	The element's Index which can used as key. This property is not required.	`<SortableItem id={id} />`
`collection`	Number \| String	`0`	The collection the element is part of. This is useful if you have multiple groups of sortable elements within the same SortableContainer.	`<SortableItem collection={1} />`
`disabled`	Boolean	`false`	Whether the element should be sortable or not.	`<SortableItem disabled />`

<li class="nav-item"> <a class="nav-link active" href="#introduction">Introduction</a> </li> <li class="nav-item"><a class="nav-link" href="#download">Download</a></li> <li class="nav-item"> <a class="nav-link" href="#imports">API Reference</a> <ul class="nav-item"> <li class="nav-item"> <a class="nav-link" href="#props">Properties</a> </li> <li class="nav-item"> <a class="nav-link" href="#methods">Methods</a> </li> <li class="nav-item"> <a class="nav-link" href="#item-props">SortableItem properties</a> </li> </ul> </li>