Vue【原创】可拖动列表 darg-list

可拖动排序的列表 drag-list，这个比较简单易懂，拿例子直接运行看效果就好了。

组件代码：

<template>
    <ul class="list" ref="parentNode" @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd">
        <li class="list-item" v-for="(item, index) in dataProvider" :key="item[valueKey]" :id="item[valueKey]"
            :draggable="draggable">
            <slot :item="item" :index="index">
                <div>{{ item }}</div>
            </slot>
        </li>
    </ul>
</template>

<script>
    const _LI_ = 'LI';

    export default {
        name: 'LiloDragList',
        props: {
            dataProvider: {
                type: Array,
                default () {
                    return {}
                }
            },
            draggable: {
                type: Boolean,
                default: true
            },
            valueKey: {
                type: String,
                default: 'id'
            }
        },
        data() {
            return {
                draging: null,
                target: null
            };
        },
        mounted() {
            document.body.ondrop = event => {
                event.preventDefault();
                event.stopPropagation();
            };
        },
        methods: {
            onDragStart(event) {
                // console.log('drag start');
                this.draging = event.target;
            },
            onDragOver(event) {
                // console.log(event.target.nodeName);
                this.target = event.target;
                let targetTop = event.target.getBoundingClientRect().top;
                let dragingTop = this.draging.getBoundingClientRect().top;
                if (this.target.nodeName === _LI_ && this.target !== this.draging) {
                    if (this.target) {
                        if (this.target.animated) {
                            return;
                        }
                    }

                    if (this._index(this.draging) < this._index(this.target)) {
                        this.target.parentNode.insertBefore(this.draging, this.target.nextSibling);
                    } else {
                        this.target.parentNode.insertBefore(this.draging, this.target);
                    }
                    this._anim(targetTop, this.target);
                    this._anim(dragingTop, this.draging);
                }
            },
            _anim(startPos, dom) {
                let offset = startPos - dom.getBoundingClientRect().top;
                dom.style.transition = 'none';
                dom.style.transform = `translateY(${offset}px)`;

                //触发重绘
                dom.offsetWidth;
                dom.style.transition = 'transform .3s';
                dom.style.transform = ``;
                //触发重绘
                // setTimeout(()=>{
                //     dom.style.transition="transform .3s";
                //     dom.style.transform=``;
                // },0)
                clearTimeout(dom.animated);

                dom.animated = setTimeout(() => {
                    dom.style.transition = '';
                    dom.style.transform = ``;
                    dom.animated = false;
                }, 300);
            },
            onDragEnd(event) {
                // console.log('drag end');
                let temp = Array.from(this.$refs.parentNode.childNodes);
                let currentNodes = temp.filter(node => {
                    return node.nodeName === _LI_
                })
                let list = currentNodes.map((i, index) => {
                    let item = this.dataProvider.find(c => {
                        const unikey = i.getAttribute(this.valueKey);
                        const flag = c[this.valueKey] === unikey;
                        return flag;
                    });
                    return item;
                });

                this.$emit('sorted', list);
            },
            _index(el) {
                let domData = Array.from(this.$refs.parentNode.childNodes);
                return domData.findIndex(i => i.innerText == el.innerText);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .list {
        padding-inline-start: 0;
        
        .list-item {
            transition: 0.3s all ease-in;
            padding: 12px;
            border-bottom: 1px solid #dbdbdb;
            list-style: none;
            margin: 0px;
            
            &:hover {
                background-color: #dbdbdb;
            }
        }
    }
</style>

 

调用案例：

<template>
    <div class="drag-list">
        <lilo-drag-list :dataProvider="dataProvider" draggable :valueKey="valueKey" @sorted="sorted">
            <template slot-scope='{ item, index }'>
                <div>
                    <span class="list-item">index：{{ index }}</span>
                    <span class="list-item">id：{{ item.id }}</span>
                    <span class="list-item">name：{{ item.name }}</span>
                    <span class="list-item">address：{{ item.address }}</span>
                </div>
            </template>
        </lilo-drag-list>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                draggable: true, //是否可拖动，默认为true
                valueKey: 'id', //数据项的唯一标识
                dataProvider: [
                    { id: 'S001', name: '张三', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S002', name: '李四', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S003', name: '王五', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S004', name: '张飞', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S005', name: '关羽', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S006', name: '嬴政', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S007', name: '廉颇', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S008', name: '蒙恬', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
                    { id: 'S009', name: '韩非', address: '湖北省武汉市江岸区百步亭花园现代城3区' }
                ]
            }
        },
        methods: {
            sorted(list) { //拖动完成之后触发
                console.log(list) //改变后的数组顺序
                console.log(this.dataProvider) //原数据顺序不会被改变
            }
        }
    }
</script>

<style lang="scss" scoped>
    .drag-list {
        padding: 10px;
        .list-item {
            margin: 0 5px;
        }
    }
</style>