sortable-react v1.2.0
sortable-react
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.
Why do we need to do this?
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.
Usage
You can see
- Install the package:
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