react-draggable 踩坑

最近需求需要做一个拖拽相关的小控件，因为整体项目比较大，需求比较集中，所以在react-dnd，react-draggable中选择了后者，记录一下在开发中遇到的一些坑。

首先分析一下react-draggable对外暴露的几个事件

• onMouseDown touchstart或mousedown的合成事件
• onStart touchstart合成事件
• onDrag touchmove，只有在拖拽动作时才会触发
• onStop touchend或者mouseup合成事件

graph TD
onMouseDown --> onStart --> onDrag如果有拖拽行为 --> onStop

以下将一步步展示Demo代码，分享一些在官方文档中未提交的内容，欢迎补充

import Draggable from 'react-draggable';

const Demo = () => {
    return <div className=container>
        <Draggable>
           <div className="content">
                <div className="d1">d1</div>
                <div className="d2">d2</div>
            </div>
        </Draggable>
    </div>
}

此处遇到react-draggable第一个坑，Draggable内只能有一个根元素

需求中要求目标元素既可以拖拽，点击时也可以触发click事件，但是在点击时如果触发了极小的移动也会被识别为拖拽，react-draggable是没有设置触发拖拽的阈值的

ondrag的第二个参数，里面的deltaX和deltaY两个参数显示了鼠标移动距离，可以结合这两个参数进行一些限制

    onDrag = (e, dalta) => {
        if (Math.abs(delta.deltaX) === 0 && Math.abs(delta.deltaY) === 0) {
        // do something
    } else {
      // do something
    }
    }

整体用下来的感觉就是相对dnd之类来说比较轻量，易上手，文档中规中矩，有些小坑需要自己踩一下