# Drag

拖拽组件

- 兼容移动端的touch和pc端的mouse事件。
- 可通过onDrag设置抓取的回调函数, 返回抓取在屏幕上的位置, 分别保存在start和move中, 以x和y的形式展示。
- 可通过onDrop设置松开瞬间的回调函数, 返回松开时在屏幕上的位置, 保存在end中, 以x和y的形式展示。

示例:

        <Drag onDrag={::this.onDrag} onDrop={::this.onDrop} style={{height:0}}>
            <div className="box" ref={(box)=>{this.box = box}}>Drag</div>
        </Drag>

        onDrag(event,position){
            this.prePosition = position.start;
            this.nowPosition = position.move;

            this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;
            this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;
            console.log(this.distanceX, this.distanceY);
        }
        onDrop(event,position){
            this.preDistanceX = this.distanceX;
            this.preDistanceY = this.distanceY;
        }

### 方法

- onDrag
- onDrop

### 属性

### 事件

Extends Component
Defined in: `src/Drag.js:6`
Module: 辅助组件

Available since 1.0.0

## Constructor

### Drag

`Drag ()`

Defined in `src/Drag.js:6`

Available since 1.0.0

#### Example:

    import React, { Component } from 'react';
    import {Drag} from 'phoenix-ui';
    import Code from "./code/code";

    export default class toast extends Component{

        constructor(props,context){
            super(props,context);

            this.preDistanceX = 0;
            this.preDistanceY = 0;
            this.distanceX = 0;
            this.distanceY = 0;
        }

        onDrag(event,position){
            this.prePosition = position.start;
            this.nowPosition = position.move;

            this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;
            this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;

            this.setBoxPosition(this.distanceX, this.distanceY);
        }

        onDrop(event,position){
            this.preDistanceX = this.distanceX;
            this.preDistanceY = this.distanceY;
        }

        setBoxPosition(x,y){
            this.box.style.webkitTransform = 'translate('+x+'px,'+y+'px)';
            this.box.style.transform = 'translate('+x+'px,'+y+'px)';
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Drag</h2>
                    <h3 className="comp-type">Dragable Box demo</h3>
                    <Code target="drag" />
                    <div className="content-drag">
                        <Drag onDrag={::this.onDrag} onDrop={::this.onDrop} style={{height:0}}>
                            <div className="box" ref={(box)=>{this.box = box}}>Drag</div>
                        </Drag>
                    </div>
                </div>
            );
        }
    }

## 方法

### onDrag

`onDrag ()`

Defined in `src/Drag.js:45`

抓取的执行函数,对应TouchStart/TouchMove

### onDrop

`onDrop ()`

Defined in `src/Drag.js:51`

放开的执行函数,对应TouchEnd