vuedraggable实现列表拖拽排序

特点

    支持触摸设备，支持智能滚动；

    支持拖拽和选择文本以及不同列表之间的拖拽；

    拖拽和视图模型同步刷新，兼容Vue 2.0 的过渡动画；

    支持撤销操作，需求定制性高。

安装

    npm install vuedraggable

引入

    import draggable from 'vuedraggable'

示例

<template>
    <div class="draggable">
        <Draggable v-model="tableData" animation="500" >
            <div class="items" v-for="(item, index) in tableData" :key="index">
                {{ item.name }}
            </div>
        </Draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
    components: {Draggable},
    data() {
        return {
            tableData: [
                {
                    name: '张三',
                    test: '我是张三'
                },
                {
                    name: '李四',
                    test: '我是李四'
                },
                {
                    name: '王五',
                    test: '我是王五'
                }
            ]
        };
    }
};
</script>
<style scoped>
.draggable{
  padding:20px;
}
.items{
  width:200px;
  text-align:center;
  border:1px solid #ccc;
  height:30px;
  line-height: 30px;
  margin-top:10px;
  cursor:pointer;
}
</style>

过滤某个元素 filter

<template>
    <div class="draggable">
        <Draggable v-model="tableData" animation="500" filter=".zhangsan">
            <div class="items" v-for="(item, index) in tableData" :key="index" :class="item.class">
                {{ item.name }}
            </div>
        </Draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
    components: { Draggable },
    data() {
        return {
            tableData: [
                {
                    name: '张三',
                    test: '我是张三',
                    class: 'zhangsan'
                },
                {
                    name: '李四',
                    test: '我是李四',
                    class: 'lisi'
                },
                {
                    name: '王五',
                    test: '我是王五',
                    class: 'wangwu'
                }
            ]
        };
    }
};
</script>
<style scoped>
.draggable {
    padding: 20px;
}
.items {
    width: 200px;
    text-align: center;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    cursor: pointer;
}
</style>

回调事件 onStart onEnd

onStart 可以获取拖拽前的列表数据
onEnd 可以获取拖拽后的列表数据

<template>
    <div class="draggable">
        <Draggable v-model="tableData" animation="500" @start="onStart" @end="onEnd">
            <div class="items" v-for="(item, index) in tableData" :key="index">
                {{ item.name }}
            </div>
        </Draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
    components: { Draggable },
    data() {
        return {
            tableData: [
                {
                    name: '张三',
                    test: '我是张三'
                },
                {
                    name: '李四',
                    test: '我是李四'
                },
                {
                    name: '王五',
                    test: '我是王五'
                }
            ]
        };
    },
    methods: {
        onStart() {
            console.log('开始拖拽');
        },
        onEnd() {
            console.log('结束拖拽');
        }
    }
};
</script>
<style scoped>
.draggable {
    padding: 20px;
}
.items {
    width: 200px;
    text-align: center;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    cursor: pointer;
}
</style>

属性

image.png