React EasyUI 放置
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| scope |
string, array |
放置范围。 |
null |
| disabled |
boolean |
为True时,禁用调整。 |
false |
事件列表
| 名称 |
参数 |
作用描述 |
| onDragEnter |
scope |
当可拖动对象被拖动回车时触发。 |
| onDragOver |
scope |
当拖动可拖动对象时触发。 |
| onDragLeave |
scope |
当可拖动对象被拖动离开时触发。 |
| onDrop |
scope |
当拖放可拖动对象时触发。 |
注：
继承： LocaleBase 。
使用方法
<Draggable>
<div className="dragitem">
<p style={{ textAlign: 'center' }}>Drag Me</p>
</div>
</Draggable>
<Droppable
onDragEnter={() => this.setState({ isover: true })}
onDragLeave={() => this.setState({ isover: false })}
onDrop={() => this.setState({ dropped: true })}
>
<div className={dropCls}>
<p style={{ textAlign: 'center' }}>Drop here</p>
</div>
</Droppable>