Vue如何實現拖拽穿梭框功能？四種方式分享（附程式碼）

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

一、使用原生js實現拖拽

點選開啟視訊講解更加詳細

    
      
      
      
    
    
      
      
按住拖動
      
      
    
  

二、VUe使用js實現拖拽穿梭框

效果圖：

三、Vue 拖拽元件 vuedraggable

vuedraggable 是標準的元件式封裝，並且將可拖動元素放進了 transition-group 上面，過渡動畫都比較好。【相關推薦：】

使用方式：

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

在使用的時候，可以通過 v-model 來雙向繫結本地 data，如果需要更新或者是觸發父元件監聽的事件，可以在 updated() 中去 emit。

案例：

四、Awe-dnd指令封裝

vue-dragging 的 npm 包的名字是 awe-dnd ，並不是 vue-dragging，這個庫的特點是封裝了 v-dragging 全域性指令，然後通過全域性指令去資料繫結等。

相比及 vuedraggable 來說， awe-dnd 是沒有雙向繫結（這裡沒有雙向繫結並不是很嚴謹，準確的來說沒有暴露雙向繫結的方式），因此提供了事件，在拖拽結束的時候用來更新列表（不需要手動更新列表，其實內部是實現了雙向繫結的）或者是去觸發父元件監聽的事件。

安裝依賴：

npm install awe-dnd --save
yarn add awe-and

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

案例：

若對您有幫助，請點選跳轉到B站一鍵三連哦！感謝支援！！！

（學習視訊分享：、）

以上就是Vue如何實現拖拽穿梭框功能？四種方式分享（附程式碼）的詳細內容，更多請關注TW511.COM其它相關文章！