我們都知道html5的拖放特性，利用它可以很方便的實現拖拽和放置功能，比如一些選擇類操作的使用場景，讓用戶去拖拽比鼠標點擊更容易接受和理解。今天我們就利用這一特性，結合vue的自定義指令，來實現一個簡單但是實用的拖放插件。

為什么叫它插件？因為我們的目標不是開發一個vue組件，而是兩個vue的自定義指令，并且最終會把這兩個自定義指令封裝到一個es6的class里，在實際項目中引入就可以很方便的使用了。

大部分的拖放使用場景都是把一些待選元素從A區域拖放到B區域。這里就涉及到兩個概念，一個是可拖拽，一個是可放置，待選元素一定是可以被拖拽的，而目標區域（容器）一定是可以放置的。

如果我們開發一個可拖拽的vue組件，或者開發一個可放置的組件，那僅僅是這個組件可拖放，此時如果需求變更，又需要另外一個組件也支持拖放，那我們仍需要為另一個組件也編寫拖放的代碼。又或者其他項目也需要拖放功能了，我們也要重新開發。這樣非常不利于維護和復用，而vue的自定義指令很好的幫我們解決了這個問題，我們只需要在組件（包括普通的dom元素）上添加自定義指令，就可以使這個組件（元素）可拖放，這樣就可以靈活的去使用了。

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

綜上，本文的目標需要完成兩個自定義指令：

v-drag 使組件可拖拽 v-drop 使組件可放置

目標已經很明確了，那就開始動手吧！由于我們要讓這兩個指令可在任意組件上發揮作用，因此需要注冊Vue全局指令。

Vue.directive(’drag’, { bind(el, binding, vnode){//只調用一次，指令第一次綁定到元素時調用。//在這里可以進行一次性的初始化設置。 }})Vue.directive(’drop’, { bind(el, binding, vnode){// }})

如果你的項目是vue-cli搭建的，你可以把這段代碼寫在main.js里vue初始化的上方。

我們先在drag指令的bind鉤子里編寫代碼，bind只調用一次，并且是在指令第一次綁定到元素時調用，因此我們用了bind鉤子。這個指令的目標是讓組件（元素）可拖拽，所以我們設置el的draggable為true

el.draggable = true;el.ondragstart = (event)=>{ event.dataTransfer.setData('Text', 'your data...');}

當元素被拖拽時，會先觸發ondragstart事件，通常我們都會在這個事件里為event的dataTransfer設置拖拽數據，目的是當元素被放置時，目標容器可以獲取拖拽過來的數據，如果拖放不能傳遞數據，那將是沒有意義的。上面的代碼調用dataTransfer的setData方法設置拖拽數據，setData的參數1表示數據類型，參數2表示要傳遞的數據。

很不幸，拖拽數據目前僅支持字符串，如果你想傳遞復雜對象，可以將數據序列化

接下來我們為drop指令的bind鉤子編寫代碼，這個指令的目的是讓組件（元素）可放置，因此我們需要為元素的ondragover（拖拽經過事件）、ondrop（放置事件）編寫handler，這兩個handler要阻止事件的默認行為。

el.ondragover = (event)=>{ event.preventDefault(); //阻止默認行為}el.ondrop = (event)=>{ event.preventDefault(); let dragData = event.dataTransfer.getData(’Text’); //獲取拖拽數據}

我們通過event.dataTransfer的getData方法可以獲取到拖拽開始事件中設置的拖拽數據。

現在你就可以把這兩個指令加到任何組件上了，加了v-drag的組件可以被拖動，加了v-drop的組件可以放置并接收拖拽數據。

<MyComponent v-drag></MyComponent><MyContainer v-drop></MyContainer>

新的問題來了，我們進行拖拽操作是為了傳遞數據，然而傳遞數據的開始階段，我們是在自定義指令drag的bind鉤子里進行的，傳遞數據的接收階段，我們是在drop的bind鉤子里進行的，那么，數據從哪兒來？到哪兒去？很顯然，數據應該來自組件，也應該傳遞給另一個組件，否則我們把指令寫到vue組件上就沒有任何意義了。

好在自定義指令的鉤子函數為我們提供了訪問組件最簡單有效的方式：那就是鉤子函數的第三個參數vnode，vnode有一個屬性是componentInstance，這個componentInstance就是自定義指令的宿主：vue組件實例！

接下來就很容易了，我們只需要為添加了v-drag的組件定義一個獲取拖拽數據的接口，為添加了v-drop的組件定義一個接收拖拽數據的接口即可。雖然vue組件并不支持接口的定義，但我們可以約定好這兩個方法名，在組件的method中進行實現即可。

//自定義組件內部methods:{ getDragData(){ //約定getDragData為獲取組件拖拽數據的接口方法 return this.id; //假設這個組件被拖拽時，需要將id傳遞出去 } setDragData(data){ //約定setDragData為組件接收拖拽數據的接口方法 this.appendNewChildById(data); //假設這個組件接收id來生成新元素 }}

然后改寫我們自定義指令設置和傳遞拖拽數據的代碼：

let dragValue = '';if(vnode.componentInstance.getDragData != undefined){ dragValue = vnode.componentInstance.getDragData();}event.dataTransfer.setData('Text', dragValue);

v-drop指令中的ondrop事件

let dragValue = event.dataTransfer.getData(’Text’);if(vnode.componentInstance.setDragData != undefined){ vnode.componentInstance.setDragData(dragValue);}

我們在訪問組件的接口方法時加了 if 判斷，因為沒有接口的約束，組件可能并沒有實現這些方法。

好啦，到這里我們已經完全實現了組件拖放的自定義指令，雖然很簡單，但是很實用也很靈活，基本可以滿足日常拖拽的需求，讓我們總結一下整個流程吧！

自定義全局指令 v-drag、v-drop 需要拖拽的組件實現獲取數據的接口方法 需要放置的組件實現接收數據的接口方法 drag指令訪問組件的接口方法獲取數據 drop指令訪問組件的接口方法傳遞數據

我們將全局自定義指令的相關代碼封裝到一個es6的class里面，并作為一個單獨的js文件放到項目里，或者發布到npm上，然后在main.js里導入這個類，調用靜態初始化方法，即可完成全局指令的注冊。這樣一來，項目當中的任意組件都可以使用v-drag和v-drop了，上面總結的五個步驟，只需要實現第2、3條即可。

以上就是如何使用vue自定義指令構建拖放插件的詳細內容，更多關于vue自定義指令構建拖放插件的資料請關注好吧啦網其它相關文章！