Edit these docs Rate these docs

React Bootstrap Sortable

React Sortable - Bootstrap 4 & Material Design

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.


        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.


        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.


        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.


        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.


        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.


        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.


        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.


        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.


        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.


        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.


        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
                  ]}.jpg`}
                  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;
      }    
    
Edit these docs Rate these docs

React Bootstrap 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


      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 />