如何實現拖曳穿梭框功能？以下這篇文章跟大家介紹一下Vue實現拖曳穿梭框功能四種方式，希望對大家有幫助。
【相關推薦：vuejs影片教學】
Lazyload 按住拖动
拖拽穿梭框
{{ item.label }} X >{{ item.label }} X >
#效果圖：
vuedraggable是標準的元件式封裝，並且將可拖曳元素放進了transition-group上面，過渡動畫都比較好。
使用方式：
yarn add vuedraggable import vuedraggable from 'vuedraggable';
在使用的時候，可以透過v-model 來雙向綁定本機data，如果需要更新或觸發父元件監聽的事件，可以在updated() 中去emit。
案例：
{{ drag ? "拖拽中" : "拖拽停止" }}
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)
案例：##
{{ color.text }}
以上是如何利用Vue實現拖曳穿梭框功能？四種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
