辅助组件 Module
Defined in:
src/Drag.js:6
拖拽组件
- 兼容移动端的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;
}