Yc-drag NPM | npm.io

yc-drag

React.js 支持多行无固定轴的列表拖放库

样例

npm.io

安装

# yarn
yarn add yc-drag

#npm
npm install yc-drag --save

API

那么你如何使用库？

`Drag`

yc-drag暴露一个组件供你进行拖拽

Props

属性名	描述	类型	默认值
lists	数据数组，用于生成拖拽项	Array(required)	[]
dragKey	数组项中作为key的属性的名称	String(required)	'id'
itemRender	被拖拽元素的渲染函数	Function(required)	() => null
dragEnd	拖拽结束时的回调函数,入参是拖拽完成更改后的数据数组	Function(required)	() => null
extra	在容器元素中的额外渲染元素	ReactNode	null
className	容器元素的类名	String	null

基本用法

import React, { useState } from 'react';
import { render } from 'react-dom';
import { list } from './datas';

const App = () => {
	const [_lists, setLists] = useState(list);
    
    const itemRender = (item)=> {
        return (<div
          style={{
            width: '50px',
            height: '30px',
            backgroundColor: 'pink'
          }}
        >{item.container}</div>);
  	}
   

  render() {
    return (
        <Drag
          style={{
            backgroundColor: 'skyblue',
            minHeight: '300px'
          }}
          lists={_lists}
          dragKey='id'
          itemRender={itemRender}
          dragEnd={setLists}
        />
      )
  }
}

render(<App />, document.getElementById('root'))

// datas.js
export const list = [
  {
    id: 'y',
    container: 'y'
  },
  {
    id: 'c',
    container: 'c'
  },
  {
    id: 'd',
    container: 'd'
  },
  {
    id: 'u',
    container: 'u'
  },
  {
    id: 'k',
    container: 'k'
  },
  {
    id: 'o',
    container: 'o'
  },
  {
    id: 'j',
    container: 'j'
  },
  {
    id: 'b',
    container: 'b'
  },
  {
    id: 'a',
    container: 'a'
  },
  {
    id: 's',
    container: 's'
  },
]

react drag

err

@everything-registry/sub-chunk-3200 @infinitebrahmanuniverse/nolb-yc

0.0.2

4 years ago

0.0.1

4 years ago