用drag事件打造一款流畅的可拖拽组件

近来在开发react聊天室过程中突发奇想，要写一款拖拽组件，提升一下聊天室的逼格，在这里便纪录一下装逼全过程。

第一步：装逼不成反被喷

第一版的拖拽组件还是比较失败的，会出现鼠标走了，组件跟不上，或者鼠标按下去了，组件跑了，或者干脆就拽不动了，而且还影响了组件内部功能使用，虽然比较失败，但是还是需要总结一下经验来着。

** 第一款实现方法： **

1、 当鼠标按下时纪录offsetX和offsetY，并纪录鼠标按下状态

handleDown(e){
  this.setState({
     offsetX: e.nativeEvent.offsetX,
     offsetY: e.nativeEvent.offsetY,
     isDown: true
  });
}

2、 监听mousemove，实时改变组件的top和left值

handleMove(e){
    if(this.state.isDown){
        let pageX = e.pageX,
            pageY = e.pageY;
        this.setState({
            x: pageX - this.state.offsetX,
            y: pageY - this.state.offsetY
        })
    }
}

3、 当mouseup时将state.isDown设置为false

第二步：修bug

其实第一款出现的问题主要还是在于监听事件的对象，我将所有事件都放在组件上明显不对，mousemove和mouseup应该在document上监听，这样修改明显不会出现鼠标走了，组件跟不上之类的问题

第三步：使用drag事件

前两步已经能满足部分需求了，但是还是有时会也卡顿，而且在react里边这样用让我感觉别扭，于是

** 机智的ZZ想到了一个投机取巧的办法: **

能不能尝试让给组件设置 draggable = true，通过在drag开始时将本体透明度设置为0将本体隐藏；出现鼠标拖拽虚像移动，当drag结束时就直接将足见一到结束位置，简直完美，大大滴提高了效率

** 然而现实是残酷的: **

当你设置了 opacity = 0 拖拽的虚影也会消失，于是乎，ZZ偶尔发现如果设置了transition: all 0.1s虚影不会消失，然而在鼠标放下，拖拽完成会有一个销魂的一闪而过的动画

第四步：懒还是要偷的，drag事件还是要用的

最终我还是决定使用drag事件，思路和第一步差不多，获取坐标的方式换成了在drag时通过事件对象获取坐标，也就不需要在document上监听事件了，好吧，这会让我觉得这比较react，** 注意： ** 我在drag事件最后一次获取的到坐标为(0,0)

声明一下：以上方法可能属于不正规的野路子，耍些小聪明，望路过的大大指导。另附上 demo地址