前陣子剛到了新公司也因此忙碌了一段時間一直沒空來做些紀錄，這次因為我們的網站後台功能要做調整，原本想說利用checkbox勾選應該就可以做了，但因為資料形式的關係反而會讓檢查搞的有點複雜，所以索性來試試看 draggable 這也是第一次使用這個功能。

前情提要

首先我們後台有多個進口品牌所以在原廠價格上會有一套公式換算成台幣，那因為每個商品價格不一樣在建立商品時操作者就必須查詢到原廠價格在自行換算台幣輸入系統，也因此讓這個流程變得很繁瑣，也因此我們讓操作者可以針對各品牌輸入各自的公式，只要輸入原廠價格就能由程式計算。

結果沒想到有的品牌可能還會有針對不同系列的商品有不同的公式去計算，為了針對這點又將這個功能做的更細了。

效果

螢幕錄製 2022-07-28 上午11.08.14.mov

目標就是讓後台的管理員能針對該品牌底下的公式自行選擇要塞入的分類，這樣若是公式增加到更多也能因應。

實作

首先就是要在要拖曳的元素上增加 draggable="true" 讓這個元素是可以被拖曳的。

<span draggable="true" @dragstart="Drag($event,item.id)" v-if="item.show"> 
	{{item.name}}
</span>

那因為 Vue 並不適合直接操作 DOM 元素所以無法像網路上的教學一樣把拖曳的元素直接append在要放置的元素內，調整一下了思路想到我應該是要把資料做移動，我每一個分類裡面都是利用v-for將陣列內的資料渲染到畫面上的，那我只有將被拖曳的資料重原本的陣列移除並加到目標陣列就好了，這樣也能夠實現一樣的效果。

那主要會用到三個 function ：

AllowDrop讓你設定的範圍是可以被Drop的

Drag則是開始拖曳滑鼠還沒放開元素之前的時候要做到的

Drop則是放下元素要做的

HTML的部分大概會長像這樣，外層的 DIV 加上AllowDrop ＆ Drop 表示可以被放置元素

內層的則是可以被拉動的元素