vue项目中拖拽总结

vue2

vue.draggable 官方文档

最简单使用

<draggable
    animation="300"
    :list="list"
    :options="{
        forceFallback: false,
        fallbackClass: 'draggingStyle'
    }"
    :move="handleDragMove"
    @start="handleDragStart"
    @end="handleDragEnd"
>
    <transition-group>
        ...
    </transition-group>
</draggable>

业务场景1:

同模块下来回拖拽内部元素，增加group参数设置同一名称即可

<draggable
    animation="300"
    :list="list"
    :options="{
        group:'list', // 同组统一命名
        forceFallback: false,
        fallbackClass: 'draggingStyle'
    }"
    :move="handleDragMove"
    @start="handleDragStart"
    @end="handleDragEnd"
>
    <transition-group>
        ...
    </transition-group>
</draggable>

业务场景2

禁止拖拽某一列，比如表格合计，将该列增加指定class，将参数filter设置成该class名称即可

<draggable
    animation="300"
    :list="list"
    filter=".forbid"
    :options="{
        forceFallback: false,
        fallbackClass: 'draggingStyle'
    }"
    :move="handleDragMove"
    @start="handleDragStart"
    @end="handleDragEnd"
>
    <transition-group>
        ...
    </transition-group>
</draggable>

vue3

sortable.js 官方文档

创建hooks的useSortable.js

export const useSortable = (dom: HTMLElement, options: any) => {
    async function initSortable() {
        const Sortable = (await import('sortablejs')).default;
        Sortable.create(dom, {
            animation: 500,
            delay: 400,
            delayOnTouchOnly: true,
            ...options
        });
    }
    return { initSortable };
};

最简单使用

nextTick(() => {
    let { initSortable } = useSortable(unref(columnListRef).$el, {
        onUpdate: (evt: any) => {
            const { oldIndex, newIndex } = evt;
            let list: any = deepClone(state.columns.default);
            const val = list.splice(oldIndex, 1)[0];
            list.splice(newIndex, 0, val);
            state.columns.default = list;
            nextTick(() => {
                let { check, fixedLeft, fixedRight, action } = state.columns;
                let newList = [...check, ...fixedLeft, ...list, ...fixedRight, ...action];
                emit('setColumns', newList);
            });
        },
    });
    initSortable();
});

业务场景1:

表格行拖拽，且禁止拖动某一行

const initSortable = () => {
    nextTick(() => {
        let { initSortable } = useSortable(unref(relateJiraTableRef)?.$el.querySelector('.ant-table-tbody') as any, 
            {onUpdate: (evt: any) => {
                const { oldIndex, newIndex } = evt;
                const val = jiraList.value.splice(oldIndex, 1)[0];
                jiraList.value.splice(newIndex, 0, val);
                handleUpdatePro();
            },
            filter: '.disabled', // 禁止拖拽
            onMove(e) {
                return e.related.className.indexOf('disabled') === -1; // 禁止拖拽到这个元素中
            },
        });
        initSortable();
    });
};

这就是一篇简单的总结文档，后续如果有更多场景，也会及时更新哒～