Drag and Drop

Install

npm install --save react-draggable-and-droppable

Drag拖拽对象

目前采用组件组合模式。此模式拖拽的源元素并不会移动。

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: 放置时鼠标位置。