0.0.3 • Published 3 years ago

dnd-drop-input v0.0.3

Weekly downloads
12
License
-
Repository
-
Last release
3 years ago

1. 进入项目的根目录,执行命令: npm install --save dnd-drop-input 下载项目到本地来。

效果初始化如下所示:

我们可以进行单选拖动操作,如下图:

同样我们也支持多选拖动操作,如下图所示:

代码初始化如下所示:

import React from 'react'
import ReactDOM from 'react-dom'
import { DndProvider } from 'react-dnd'
import Backend from 'react-dnd-html5-backend'
import DropTarget from 'dnd-drop-input'
import TestSource from './components/TestSource';

function App() {
  return (
    <div className="App">
      <DndProvider backend={Backend}>
        <DropTarget
          canDrop={true}
          onChange={(data) => {
            console.log('---返回的数据1312332132132---', data);
          }}
        />
        <TestSource />
      </DndProvider>
    </div>
  )
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

参数解析如下

canDrop: 必填的,必须为true,表示可以拖动到目标容器里面去。
type: 'multiSelect' 当 type = 'multiSelect', 表示的是多选操作,默认不传type值就是单选了。
onChange: 回调函数,只要操作了都提供回调,把对应的数据返回回来。