為什麽選擇Vue?
主要原因：對於前端開發來說，兼容性是我們必須要考慮的問題之壹。我們的項目不需要兼容低版本瀏覽器。項目本身也是壹個數據驅動型的。加之，Vue本身具有以下主要特性：
使用虛擬DOM； 輕量級框架； 高效的數據綁定； 靈活的組件系統； 完整的開發生態鏈。這就是我們為什麽選擇Vue框架的壹些原因。
為什麽要封裝成壹個Vue組件？
主要目的是可提高代碼的復用性和可維護性。
復用性：組件化後，壹些樣式和邏輯均通過配置參數的方式去差異化體現，所以參數的可配置性提高了組件的復用率和靈活性。 可維護性：組件化後，組件內部的邏輯只對組件負責，外部的邏輯只通過配置參數適配，所以提高了代碼的邏輯清晰度，可以快速定位代碼出現問題的地方。組件化搭建頁面圖示：
上圖可看出，在Vue中，所謂組件化搭建頁面，簡單來說，頁面實際上是由壹個個功能獨立的組件搭建而成。這些組件之間可以組合、嵌套，最終形成了我們的頁面。
組件構成
下面是壹個完成的組件構成：
// 組件內模板
// 組件內邏輯代碼
<script type="text/javascript"></script>
// 組件內封裝的樣式
<style lang="scss" scoped></style>開發Vue移動拖拽組件為例
拖拽原理
手指在移動的過程中，實時改變元素的位置即top和left值，使元素隨著手指的移動而移動。
拖拽實現
開始拖動時：獲取到接觸點相對於整個視圖區的坐標clientX，clientY；獲取元素距離視圖上側和左側的距離 initTop，initLeft；計算接觸點距離元素上側和左側的距離 elTop = clientY - initTop, elLeft = clientX - initLeft； 拖動過程中：通過 currTop = clientY - elTop, currLeft = clientX - elLeft實時獲取元素距離視圖上側和左側的距離值，並賦值給元素，使元素跟著手指的移動而動起來； 拖動結束，定位元素。Vue中的實現
使用Vue，最大的不同之處是我們幾乎不去操作DOM，要充分利用Vue的數據驅動來實現拖拽功能。本例中，我們只需在垂直方向上拖動元素，所以只需考慮垂直方向的移動即可。
上圖中，通過data中的dragList渲染拖拽區域列表，代碼如下：
template:
<p class="drag-title">拖拽可調整順序</p>
<ul class="drag-list">
<li class="drag-item">{{item.txt}}</li>
</ul>
script:
export default {
data() {
return {
dragList:null
}
},
created() {
this.dragList = [
{
isDrag: false,
txt: '列表1',
isShow: false
}
...
]
},
}假設我們將元素從位置1拖至位置3，本質上是數組的順序發生了改變。這就有必要提壹下Vue的最大特性：數據驅動。
所謂的數據驅動就是當數據發生變化時，通過修改數據狀態，使用戶界面發生相應的改變，開發者不需要手動的去修改DOM。
Vue的數據驅動是通過MVVM這種框架來實現的，MVVM框架主要包含3個部分:Model、View、Viewmodel。
_ Model：數據部分；
_ View：視圖部分；
_ Viewmodel：連接視圖與數據的中間件。
順著這個思路走下去，我們知道：
_ oldIndex：元素在數組中的初始索引index；
_ elHeight：單個元素塊的高；
_ currTop = clientY - elTop：元素在拖動過程中距離可視區上側距離；
_ currTop - initTop > 0：得知元素是向上拖拽；
_ currTop - initTop < 0：得知元素是向下拖拽。
我們以向下拖拽來說：
_ 首先，我們要在拖拽結束事件touchend中判斷元素從拖動開始到拖動結束時拖動的距離。若小於某個設定的值，則什麽也不做；
_ 然後，在touchmove事件中判斷，若(currTop - initTop) % elHeight>= elHeight/2成立，即當元素拖至另壹個元素塊等於或超過1/2的位置時，即可將元素插入到最新的位置為newIndex = (currTop - initTop) / elHeight + oldIndex。
_ 最後，若手指離開元素，那麽我們在touchend事件中，通過this.dragList.splice(oldIndex, 1)，this.dragList.splice(newIndex, 0, item)重新調整數組順序。頁面會根據最新的dragList渲染列表。
寫到這裏，我們儼然已經用Vue實現了移動端的拖拽功能。但是拖拽體驗並不好，接下來，我們對它進行優化。
優化點：我們希望，在元素即將可能落到的位置，提前留出壹個可以放得下元素的區域，讓用戶更好的感知拖拽的靈活性。
方案：（方案已被驗證是可行的）將li的結構做壹下修改，代碼如下：
<ul>
<li class="drag-item">
<p class="leave-block"></p>
// 向上拖拽時留空
<p class="">{{item.txt}}</p>
<p class="leave-block"></p>
// 向下拖拽時留空</li>
</ul>?拖拽開始：將元素的定位方式由static設置為absolute，z-index設置為壹個較大的值，防止元素二次拖拽無效；
拖拽過程中：將元素即將落入新位置的那個li下p的item.isShow設置為true，其他li下p的item.isShow均設置為false; 拖拽結束：將所有li下p的item.isShow 均設置為false，將元素定位方式由absolute設置為static。貼壹段偽代碼：
touchStart(e){
// 獲取元素距離視口頂部的初始距離
initTop = e.currentTarget.offsetTop;
// 開始拖動時，獲取鼠標距離視口頂部的距離
initClientY = e.touches[0].clientY;
// 計算出接觸點距離元素頂部的距離
elTop = e.touches[0].clientY - initTop;
},
touchMove(index, item, e){
// 將拖拽結束時，給元素設置的static定位方式移除，防止元素二次拖拽無效
e.target.classList.remove('static');
// 給拖拽的元素設置絕對定位方式
e.target.classList.add('ab');
// 獲取元素在拖拽過程中距離視口頂部距離
currTop = e.touches[0].clientY - elTop;
// 元素在拖拽過程中距離視口頂部距離賦給元素
e.target.style.top = currTop ;
// 獲取元素初始位置
oldIndex = index;
// 獲取拖拽元素
currItem = item;
// 若元素已經拖至區域外
if(e.touches[0].clientY > (this.dragList.length) * elHeight){
// 將元素距離上側的距離設置為拖動區視圖的高
currTop = (this.dragList.length) * elHeight;
return;
}
// 向下拖拽
if(currTop > initTop ){
// 若拖拽到大於等於元素的壹半時，即可將元素插入到最新的位置
if((currTop - initTop) % elHeight>= elHeight / 2){
// 計算出元素拖到的最新位置
newIndex = Math.round((currTop - initTop) / elHeight) + index;
// 確保新元素的索引不能大於等於列表的長度
if(newIndex < this.dragList.length){
// 將所有列表留空處隱藏
for(var i = 0;i< this.dragList.length;i++){
this.dragList[i].isShow = false;
}
// 將元素即將拖到的新位置的留空展示
this.dragList[newIndex].isShow = true;
}
else {
return;
}
}
}
// 向上拖拽，原理同上
if(currTop < initTop){ ... } }, touchEnd(e){ // 若拖動距離大於某個設定的值，則按照上述，執行相關代碼 if(Math.abs(e.changedTouches[0].clientY - initClientY ) > customVal){
this.dragList.splice(oldIndex, 1);
this.dragList.splice(newIndex, 0, currItem);
for(var i = 0;i< this.dragList.length;i++){
this.dragList[i].isShow = false;
this.dragList[i].isShowUp = false;
}
}
e.target.classList.remove('ab');
e.target.classList.add('static');
}優化後，如下圖所示：
以上便是用Vue實現移動端拖拽組件的過程。我們知道，有些項目是需要在PC端用Vue實現此功能。這裏簡單提壹下PC與移動端的區別如下：
PC端可以使用的事件組有兩種：第壹種：H5新特性draggable，dragstart，drag，dragend；第二種：mousedown，mousemove，mouseup; PC端獲取鼠標坐標是通過e.clientX，clientY，區別於移動端的e.touches[0].clientX，e.touches[0].clientY。相信看了本文案例妳已經掌握了方法，更多精彩請關註Gxl網其它相關文章！
推薦閱讀：
怎樣操作vue中$emit 與$on父子與兄弟組件通信
如何使用node命令方式啟動修改端口