vue + vuedraggable 实现拖拽排序

安装

npm install vuedraggable

引入

import draggable from 'vuedraggable'

注册

components: {
    draggable
}

html

<draggable class="list" v-model="modules" :clone="clone" :options="{group: {name: 'layout', pull: 'clone', put: false}, draggable: '.item', forceFallback: true, sort: false, animation: 50}">
    <transition-group tag="ul">
        <li v-for="(item, index) in modules" :key="index" class="item">
        <div class="holder">
            <img :src="item.icon" />
            <h3>{{item.text}}</h3>
        </div>
        </li>
    </transition-group>
</draggable>

相关文档

官方地址：https://sortablejs.github.io/Vue.Draggable/#/simple

Github：https://github.com/SortableJS/Vue.Draggable

Demo：https://david-desmaisons.github.io/draggable-example/