1.0.2 • Published 5 years ago
react-draggable-and-droppable v1.0.2
Drag and Drop
Install
npm install --save react-draggable-and-droppableDrag拖拽对象
目前采用组件组合模式。此模式拖拽的源元素并不会移动。
example
import { Draggable } from 'react-draggable-and-droppable';
<Draggable
value={'jch'}
onDrag={this.onDrag}>
<div>
<p>jch</p>
</div>
</Draggable>props
| Prop/Attr | Type | Default | isNeed | Description |
|---|---|---|---|---|
| value | any | '' | yes | 拖拽过程触发的事件都会将该值返回，标记拖拽的元素。 |
| proxy | string | 'clone' | no | 拖拽时显示跟随鼠标的代理元素，默认为克隆自身元素DOM,可设为'', 不显示代理元素。 |
| proxyClass | string | 'z-dragproxy' | no | 上面clone的代理元素，外层会默认加个'z-dragproxy' class，可自定义拖拽时代理元素样式，同时拖拽元素也有个'draggable-source'，可自定义拖拽时元素的样式 |
| disabled | boolean | false | no | 是否可拖拽 |
Event
- onDragStart
- onDrag
- onDragEnd
目前提供这几个事件，param都会返回几个关键信息
- origin: 拖拽源，React Componet。
- value: 拖拽元素设置的props value的值。
- pageX: 鼠标位置
- pageY: 鼠标位置
Drop放置对象
example
import { Droppable } from 'react-draggable-and-droppable';
<Droppable onDrop={this.onDrop}>
<div style={{width: '200px', height: '200px', background: 'red'}}>
<p>放置拖拽元素区域</p>
</div>
</Droppable>Event
- onDragEnter
- onDragOver
- onDragLeave
- onDrop
目前提供这几个事件，param都会返回几个关键信息
- origin: 拖拽源对象，React Component
- target: 拖拽放置对象。React Component
- value: 拖拽源的value值。
- pageX: 放置时鼠标位置。
- pageY: 放置时鼠标位置。