d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

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:

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

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this