辅助组件 Module

Defined in: src/drag/index.js:8

拖拽组件

  • 兼容移动端的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;
    }

This module provides the following classes: