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/