Sort Items In Lists Or Grids – easy-sort

An easy React component to sort items in lists or grids via drag and drop.

It is mobile-friendly by default. It doesn’t block scrolling the page when swiping inside it: the user needs to press an item during at least 200ms to start the drag gesture.

On non-touch device, the drag gesture only starts after moving an element by at least one pixel. This is done to avoid blocking clicks on clickable elements inside an item.

Basic Usage:

1. Install and import the easy-sort component.

# Yarn
$ yarn add react-easy-sort

# NPM
$ npm i react-easy-sort
import React from "react";
import SortableList, { SortableItem } from "react-easy-sort";

2. Add sortable items to the sortable list.

<SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
  {items.map((item) => (
    <SortableItem key={item}>
      <div className="item">{item}</div>
    </SortableItem>
  ))}
</SortableList>

Preview:

Sort Items In Lists Or Grids - easy-sort

Download Details:

Author: ricardo-ch

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ricardo-ch/react-easy-sort

License: MIT

You Might Be Interested In:

Add Comment