近来在开发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地址
