Draggable為基于Sortable.js的vue組件，用以實現拖拽功能。
具體說明，請參考：學習鏈接
npm官方演示：
vuedraggable特性：
使用
安裝：
npm install vuedraggable
頁面引入：
import draggable from 'vuedraggable'
data定義數據進行模擬：這是排序的案例，跟上面圖不一樣
<template> <div> <!-- 調用組件 --> <draggable element="ul" v-model="listdata"> <li v-for="item in listdata">{{item.name}}</li> </draggable> <!-- 展示list數據效果 --> {{listdata}} </div></template> <script>import draggable from 'vuedraggable'export default { name: 'draggabletest', components: { draggable, }, data () { return { listdata:[ { id: 1, name: '葉落森1' }, { id: 2, name: '葉落森2' }, { id: 3, name: '葉落森3' }, { id: 4, name: '葉落森4' }, { id: 5, name: '葉落森5' } ] } },}</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
