Vue2 Draggable是一個基于Vue2開發的拖拽庫,可以輕松實現拖拽效果。它有與其他庫不同的特點,通過一系列的配置項,可以高度自定義,完全掌握拖拽的實現。
首先,通過npm install vue2-draggable安裝vue2-draggable庫,并在需要使用的組件中引入
// 引入 import draggable from 'vuedraggable' // 注冊組件 export default { components: { draggable } }
使用vue2-draggable需要使用v-model來綁定數據,并制定axis屬性('x'代表只能沿著x軸拖拽,'y'代表只能沿著y軸拖拽)。limit屬性可以限制拖拽范圍,emitOnDrop屬性代表是否在拖拽完成后觸發事件。
{{item.name}}
vue2-draggable還提供了一些API方法,可以自定義實現拖拽的效果。例如,使用:transition-duration屬性控制拖拽完成后的動畫效果,使用:transition-mode屬性控制動畫的執行方式。通過slot-scope可以控制每個拖拽的元素,這個slot-scope的值包含三個值:index、dragging和event。
{{item.name}}我在拖拽中我是占位的元素
除此之外,vue2-draggable還提供了一些可供使用的快捷指令,例如:drag-handle,表示使用drag-handle所在元素來代表拖動目的地。在使用之前,必須指定drag-handle屬性,例如:draggable v-model="list" v-drag-handle="'.'+item.name"。
總的來說,vue2-draggable是一個強大的拖拽插件,適用于Vue2??梢苑奖汩_發者實現各種拖動相關的需求,例如排序,拖動視圖等。同時,它也提供了多種可供自定義的配置項和方法。這是一個非常出色的插件,強烈建議大家使用。