背景：最近做的頁面原本有一個(gè)點(diǎn)贊懸浮按鈕，但是在不同分辨率的移動(dòng)設(shè)備屏幕上，后邊的文字顯示位置不固定，有的會(huì)被懸浮按鈕擋住。所以加了一個(gè)拖拽功能。
參考解決辦法：?狗尾草-Vue拖拽組件
遇到問題及解決：
1.unable to preventDefault inside passive event listener due to taeget being treated as passive
原因是為了滾動(dòng)順滑，touchmove等事件會(huì)被瀏覽器默認(rèn)設(shè)置為passive：true，需要手動(dòng)設(shè)置成false。參考：Unable to preventDefault inside passive event listener。文中提到的兩種辦法，第一種可以，第二種css辦法試了無效（可能是設(shè)置的位置不對？）
2.拖拽之后，被拖拽的組件大小會(huì)改變
我是只需要y軸拖拽，拖拽后空間的高度改變了，拖過的路徑都變成了div的高度，再點(diǎn)擊之前組件擋住的地方，會(huì)出現(xiàn)點(diǎn)擊到組件的效果。解決辦法是設(shè)置組件height屬性。
3.設(shè)置tansition后拖拽“不動(dòng)”
網(wǎng)上看的一個(gè)例子里邊加了transition，可能是想讓效果平滑一些，但是卻有一種拖不動(dòng)的感覺。當(dāng)時(shí)以為是拖拽功能實(shí)現(xiàn)的有問題，于是刪了換了上邊鏈接里的方法，拖拽get√。然后試著加了一下transition，又出現(xiàn)了阻塞。所以這里應(yīng)該是不適合用transition屬性的，而且不用也挺平滑的。
學(xué)習(xí)總結(jié)：
拖拽功能的實(shí)現(xiàn)，主要是通過監(jiān)聽鼠標(biāo)事件，計(jì)算各種數(shù)值，不斷調(diào)整組件的位置。因此，需要復(fù)習(xí)的知識點(diǎn)是鼠標(biāo)事件，各種尺寸數(shù)據(jù)及之間的關(guān)系。存在的不足是，雖然發(fā)現(xiàn)了問題并解決了，但還是不知道問題原理層面的原因。知其然，不知其所以然，希望之后能把這塊補(bǔ)充起來。
