React-dnd

DnD 拖拽

DragSource

DragSource 是用来包装需要拖拽的组件，是一个接受三个必需参数的高阶组件。

参数

参数	说明	返回值
type	必需
spec	必需	拖拽事件的方法对象
collect	必需，接受两个参数 connect 和 monitor
options	不必需

type

拖拽组件（DragSource）与用来接受拖拽组件（DropTarget）要一致。

举例子

@DragSource("test", spec, collect)

@DropTarget("test", spec, collect)

spec

spec 是可以定义特定的对象，定义 DragSource 和 DropTarget 组件相关的事件。

举例子

@DragSource("test", {
   
   beginDrag(props) {
   
      return props.widget
    },
}, collect)

@DropTarget("test", {
   
   drop(props, monitor, component) {
   
      props.onDrop(monitor.getItem());
    },
}, collect)

DragSource 中 spec 方法

方法	说明
beginDrag(props, monitor, component)	拖动开始时触发的事件，是必需要有的方法
endDrag(props, monitor, component)	拖动结束时触发的事件
canDrag(props, monitor)	当前是否可以拖拽的事件
isDragging(props, monitor)	拖拽时触发的事件

collect

collect 是一个函数，有两个默认的参数，将会返回一个对象，这个对象会注入到组件的 props 中。

参数 connect 有两个内置的方法：dragSource() 和 dragPreview()，其中 dragSource()返回一个函数，是将 source DOM 和 React DnD backend 连接起来

举例子

render(