Sortable-React在React框架下，基于Type

Demo | npm

Sortable-React Under the React framework, based on the React component under TypeScript syntax, hook functions are used to handle, Drag responds to events, and drag and sort Doms.

version starts in its simplest form. If you need rich interaction, please download a higher version.

We will help you install the following plugins: react, react dom, ahaooks, less loader

Based on the React framework, it is necessary to install React.

Based on the React component under TypeScript syntax, it is necessary to install React dom.

Based on the Css extension language, it is necessary to install less loader.

Based on hook functions, it is necessary to install hooks.

You can see

yarn add sortable-react

or

npm install sortable-react Import the component in your <script setup> (or <script>):

import { Sortable } from "sortable-react"; Use the component:

return ( <> <Sortable parameter={['标签1'，'标签2']} config={ { class:'', style:{ flexDirection:'column' }, child:{ class:'', style:{ width:'100%', height:'50px', } } } } > </Sortable> </> ) Props parameter (Array<any>, required): your data to list Events

You can listen to Sortable events by adding the listeners to the Sortable component. For example:

<Sortable @click="(event: Event) => void" > Using plugins

You need to mount any plugins you want outside of before importing this library. For example, the below is correct:

import { useMount } from "ahooks"; import { useCallback, useMemo, useRef, useState } from "react"; import styles from './index.less'; Development

Run yarn to install dependencies