Drag

拖拽组件

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

示例:

    <Drag dragCallback={::this.dragCallback} dropCallback={::this.dropCallback} style={{height:0}}>
        <div className='box' ref={(box)=>{this.box = box}}>Drag</div>
    </Drag>
    dragCallback(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);
    }
    dropCallback(event,position){
        this.preDistanceX = this.distanceX;
        this.preDistanceY = this.distanceY;
    }

方法

属性

事件

Extends Component
Defined in: src/drag/index.js:8
Module: 辅助组件

Available since 1.0.0

Constructor

Drag

Drag ()

Defined in src/drag/index.js:8

Available since 1.0.0

Example:

import React, { Component } from "react"

import Drag from "phoenix-ui/lib/drag"
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;
    }

    dragCallback(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);
    }

    dropCallback(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 dragCallback={this.dragCallback.bind(this)} dropCallback={this.dropCallback.bind(this)} style={{height:0}}>
                        <div className="box" ref={(box)=>{this.box = box}}>Drag</div>
                    </Drag>
                </div>
            </div>
        );
    }
}

方法

dragCallback

dragCallback
(
  • event
  • position
)

Defined in src/drag/index.js:47

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

参数:

event Object
position Object

位置坐标
参数名类型标识描述
event Object
position Object

位置坐标

dropCallback

dropCallback
(
  • event
  • position
)

Defined in src/drag/index.js:55

放开的执行函数,对应TouchEnd

参数:

event Object
position Object

位置坐标
参数名类型标识描述
event Object
position Object

位置坐标