Drag Restrictions

Configure allowDrag and denyDrag to control which components can be dragged into containers. This helps you customize drag-and-drop behavior and maintain consistency in form design.

Data Structure

// List of draggable components
type AllowDrag = string[] | {
    // List of draggable menus
    menu: string[];
    // List of draggable components
    item: string[];
}
// List of non-draggable components
type DenyDrag = string[] | {
    // List of non-draggable menus
    menu: string[];
    // List of non-draggable components
    item: string[];
}

• AllowDrag: Defines components or menus allowed to be dragged into the container. Can be an array of component names, or an object where menu and item specify allowed menus and components respectively.
• DenyDrag: Defines components or menus not allowed to be dragged into the container. Can be an array of component names, or an object where menu and item specify prohibited menus and components respectively.
• Priority: AllowDrag configuration takes priority over DenyDrag.

Basic Example

In a "layout" container, only allow dragging layout-related components such as row and column components:

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        allowDrag: {
            group: {
                item: ['fcRow']
                menu: ['main']
            }
        }
    }
</script>

Restrict Components That Cannot Be Dragged In

In a group component, prohibit dragging in sub-form components, but allow other components:

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        denyDrag: {
            subForm: {
                menu: ['subform']
            }
        }
    }
</script>

Restrict Through Component Drag Rules

In a grid component, only allow dragging in basic components:

const colRule = {
    menu: 'layout',
    icon: 'icon-col',
    label: 'Grid',
    name: 'col',
    // Allow dragging components inside
    drag: true,
    // Control draggable components
    allowDrag: {
        menu: ['main']
    },
    inside: true,
    mask: false,
    rule() {
        return {
            type: 'Col',
            props: {span: 12},
            children: []
        };
    },
    props(_, {t}) {
        return [{
            type: 'slider',
            title: 'Width',
            field: 'span',
            value: 12,
            props: {min: 0, max: 24}
        }];
    }
};