vue-dragable

vue-dragable

A sortable list component for Vue!

Install

npm i -S vue-dragable

Example

// app's main.js
import Vue from "vue";
import vueDragable from "vue-dragable";

Vue.use(vueDragable);

<script>
    export default {
        data() {
            return {
                data: [{ id: '00', value: "0" }, { id: '11', value: "1" }, { id: '22', value: "2" }, { id: '33', value: "3" }, { id: '44', value: "4" }]
            }
        },
        methods: {
            onSort(data) {
              console.log(data);
            }
        }
    }
</script>
<template>
	<el-form label-width="80px">
        <dragable v-model="data" @sort="onSort">
            <template slot-scope="{ data }">
                <el-form-item v-for="(item, n) in data" :key="item.id" label="输入框：">
                    <el-input v-model="data[n].value"></el-input>
                </el-form-item>
            </template>
        </dragable>
	</el-form>
</template>

API

props

value/v-model : {array} - a list data

events

sort : Triggered when the list is sorted

• callback fun's params: data : {array} - new list data