近來在開發(fā)react聊天室過程中突發(fā)奇想鞋真，要寫一款拖拽組件，提升一下聊天室的逼格，在這里便紀錄一下裝逼全過程勘高。
第一步：裝逼不成反被噴
第一版的拖拽組件還是比較失敗的，會出現(xiàn)鼠標走了坟桅，組件跟不上华望，或者鼠標按下去了，組件跑了仅乓，或者干脆就拽不動了赖舟，而且還影響了組件內(nèi)部功能使用，雖然比較失敗夸楣，但是還是需要總結(jié)一下經(jīng)驗來著建蹄。
** 第一款實現(xiàn)方法： **
1碌更、 當鼠標按下時紀錄offsetX和offsetY，并紀錄鼠標按下狀態(tài)
handleDown(e){
this.setState({
offsetX: e.nativeEvent.offsetX,
offsetY: e.nativeEvent.offsetY,
isDown: true
});
}
2洞慎、 監(jiān)聽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設(shè)置為false
第二步：修bug
其實第一款出現(xiàn)的問題主要還是在于監(jiān)聽事件的對象劲腿，我將所有事件都放在組件上明顯不對旭绒，mousemove和mouseup應(yīng)該在document上監(jiān)聽，這樣修改明顯不會出現(xiàn)鼠標走了焦人，組件跟不上之類的問題
第三步：使用drag事件
前兩步已經(jīng)能滿足部分需求了挥吵，但是還是有時會也卡頓，而且在react里邊這樣用讓我感覺別扭花椭，于是
** 機智的ZZ想到了一個投機取巧的辦法: **
能不能嘗試讓給組件設(shè)置 draggable = true忽匈，通過在drag開始時將本體透明度設(shè)置為0將本體隱藏；出現(xiàn)鼠標拖拽虛像移動矿辽，當drag結(jié)束時就直接將足見一到結(jié)束位置丹允，簡直完美，大大滴提高了效率
** 然而現(xiàn)實是殘酷的: **
當你設(shè)置了 opacity = 0 拖拽的虛影也會消失袋倔，于是乎雕蔽，ZZ偶爾發(fā)現(xiàn)如果設(shè)置了transition: all 0.1s虛影不會消失，然而在鼠標放下宾娜，拖拽完成會有一個銷魂的一閃而過的動畫
第四步：懶還是要偷的批狐，drag事件還是要用的
最終我還是決定使用drag事件，思路和第一步差不多前塔，獲取坐標的方式換成了在drag時通過事件對象獲取坐標嚣艇，也就不需要在document上監(jiān)聽事件了，好吧华弓，這會讓我覺得這比較react髓废，** 注意： ** 我在drag事件最后一次獲取的到坐標為(0,0)
聲明一下：以上方法可能屬于不正規(guī)的野路子，耍些小聰明该抒，望路過的大大指導(dǎo)慌洪。另附上 demo地址
