為什麼選擇vue?
主要原因：對於前端開發來說，相容性是我們必須要考慮的問題之一。我們的專案不需要相容低版本瀏覽器。專案本身也是乙個資料驅動型的。加之，vue本身具有以下主要特性：
•使用虛擬dom；
•輕量級框架；
•高效的資料繫結；
•靈活的元件系統；
•完整的開發生態鏈。
這就是我們為什麼選擇vue框架的一些原因。
為什麼要封裝成乙個vue元件？
主要目的是可提高**的復用性和可維護性。
•復用性：元件化後，一些樣式和邏輯均通過配置引數的方式去差異化體現，所以引數的可配置性提高了元件的復用率和靈活性。
•可維護性：元件化後，元件內部的邏輯只對元件負責，外部的邏輯只通過配置引數適配，所以提高了**的邏輯清晰度，可以快速定位**出現問題的地方。
元件化搭建頁面圖示：
上圖可看出，在vue中，所謂元件化搭建頁面，簡單來說，頁面實際上是由乙個個功能獨立的元件搭建而成。這些元件之間可以組合、巢狀，最終形成了我們的頁面。
元件構成
下面是乙個完成的元件構成：
// 元件內模板
// 元件內邏輯**
// 元件內封裝的樣式
開發vue移動拖拽元件為例
拖拽原理
手指在移動的過程中，實時改變元素的位置即top和left值，使元素隨著手指的移動而移動。
拖拽實現
•開始拖動時：獲取到接觸點相對於整個檢視區的座標clientx，clienty；獲取元素距離檢視上側和左側的距離 inittop，initleft；計算接觸點距離元素上側和左側的距離 eltop = clienty - initt程式設計客棧op, elleft = clientx - initleft；
•拖動過程中：通過 currtop = clienty - eltop, currleft = clientx - elleft實時獲取元素距離檢視上側和左側的距離值，並賦值給元素，使元素跟著手指的移動而動起來；
•拖動結束，定位元素。
vue中的實現
使用vue，最大的不同之處是我們幾乎不去操作dom，要充分利用vue的資料驅動來實現拖拽功能。本例中，我們只需在垂直方向上拖動元素，所以只需考慮垂直方向的移動即可。
上圖中，通過data中的draglist渲染拖拽區域列表，**如下：
template:
拖拽可調整順序
script:
export default
},created()
...]},}
假設我們將元素從位置1拖至位置3，本質上是陣列的順序發生了改變。這就有必要提一下vue的最大特性：資料驅動。
所謂的資料驅動就是當資料發生變化時，通過修改資料狀態，使使用者介面發生相應的改變，開發者不需要手動的去修改dom。
vue的資料驅動是通過mvvm這種框架來實現的，mvvm框架主要包含3個部分:model、view、viewmodel。
– model：資料部分；
– view：檢視部分；
– viewmodel：連線檢視與資料的中介軟體。
順著這個思路走下去，我們知道：
– oldindex：元素在陣列中的初始索引index；
– elheight：單個元素塊的高；
– currtop = clienty - eltop：元素在拖動過程中距離可視區上側距離；
– currtop - inittowww.cppcns.comp > 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的結構做一下修改，**如下：
•拖拽開始：將元素的定位方式由static設定為absolute，z-index設定為乙個較大的值，防止元素二次拖拽無效；
•拖拽過程中：將元素即將落入新位置的那個li下div的item.isshow設定為true，其他li下div的item.isshow均設定為false;
•拖拽結束：將所有li下div的item.isshow 均設定為false，將元素定位方式由absolute設定為static。
貼一段偽**：
touchstart(e),
touchmove(index, item, e)
// 向下拖拽
if(currtop > inittop )
// 將元素即將拖到的新位置的留空展示
this.draglist[newindex].isshow = true;
}else }}
// 向上拖拽，原理同上
if(currtop < inittop)www.cppcns.com }, touchend(e)
}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。
小結p.s. 牢記一點，切勿在vue中過多得操作dom，要能深入理解vue資料驅動的核心思想。
本文標題: vue拖拽元件開發例項詳解
本文位址:
JS拖拽元件開發
首先，看一下拖拽的原理。被拖拽元素位置的變化，left值的變化其實就是滑鼠位置水平方向的變化值，e.clientx 滑鼠左鍵按下時e.clientx。top值的變化其實就是滑鼠位置豎直方向的變化值，e.clienty 滑鼠左鍵按下時e.clienty。另外就是設定拖拽的範圍，上下左右不得超過父元素所...
js拖拽功能元件例項
本例子是基於vue編寫，拖拽元件採用的是vue draggable 左側列表不能排序，不接收其它列表資料。右側列表接收左側的拖動資料，並轉殖左側拖動資料的副本到本身列表中。右側列表支援排序 npm install 安裝依賴 npm run serve 啟動服務 貼出 hello.vue fluid ...
vue拖拽元件vuedraggable的使用說明
doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title box style function dragstar...