# react-drag-list

**Repository Path**: apusic-frontend/react-drag-list

## Basic Information

- **Project Name**: react-drag-list
- **Description**: react拖拽列表组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/nankle/react-drag-list
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-09-24
- **Last Updated**: 2023-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### react-drag-list

> npm install @nankle/react-drag-list

```javascript
import React, {useEffect, useState, useRef} from 'react';
import {DragList} from "@nankle/react-drag-list";
import img1 from '../assets/1.png';
import img2 from '../assets/1.png';
import img3 from '../assets/1.png';
import './demoHook.scss';

export default function DemoHook() {
    const [items, setItems] = useState([{
        id: 1,
        name: 'a',
        img: img1
    },
        {
            id: 2,
            name: 'b',
            img: img2
        },
        {
            id: 3,
            name: 'c',
            img: img3
        },
    ])

    const itemRenderer = (item) => {
        return <div className='demo'>
            <span>{item.name}</span>
            <img className='demo-img' key={item.id} src={item.img} alt=""/>
        </div>;
    }

    return (
        <DragList items={items} itemRenderer={itemRender}></DragList>
    );
}

```


### demo

![示例](https://github-1251618686.cos.ap-chengdu.myqcloud.com/react-drag-list/drag.gif)


### API
items中的对象需要有id进行区分。

被拖拽的子组件会增加nankle-rdl-is-dragging的class。可以自定义样式。