sortable 拖拽時互換目标的位置_高品質 Vue 動态自由拖拽元件VueDraggable

這次給大家分享一款受開發者青睐的Vue拖拽元件Vue.Draggable。

vuedraggable 基于 Sortable.js 的Vue拖放元件，star高達12.6K+。支援拖放和視圖模型數組同步，并提供 Sortable.js 的所有功能。

該作者開發的 Sortable.js，star 20.7K+。不依賴jQ，用于浏覽器及移動裝置自由拖拽排序，支援在 Vue、React及Angular 下使用。

https://github.com/SortableJS/Sortable
           

Vue.Draggable執行個體應用

功能特性

• 完全支援 Sortable.js 功能：
• 支援觸摸裝置
• 支援拖動搖桿和可選文本
• 智能自動滾動支援
• 不同清單之間的拖放
• 沒有 jQuery 依賴
• 保持同步HTML和視圖模型清單
• 與 Vue.js 2.0 transition-group 相容
• 支援取消
• 在需要完全控制時報告任何更改的事件
• 重用現有的 UI 庫元件(例如 vuetify、element 或 vue 材料等)

安裝

$ npm i vuedraggable -S
           

支援浏覽器cdn引入使用

使用插件

{{element.name}}

ghost-class 和 handle

ghost指的是在拖拽體原本位置占坑的那個元素。

ghost-class 就是給占坑的元素設定樣式。

...
           

handle 就是拖拽的抓手，表示拖拽元素指定的可拖拽部分。

正常情況下拖拽元素整體是可拖拽，加了handle後，隻有指定的地方可以拖拽，其它地方則不能進行拖拽。

最後附上示例及項目位址

# 示例位址https://sortablejs.github.io/Vue.Draggable/# 倉庫位址https://github.com/SortableJS/Vue.Draggable
           

ok，就分享這麼多。希望對大家有所幫助，感興趣的小夥伴可以去看下哈。