.draggable-zoneand define draggable elements with
												.draggableand let drag & drop through
												.draggable-handleelement.data-kt-draggable-level="restricted"to draggable zones to set a restricted permission level to the container.data-kt-draggable-level="admin"to allow specific cards into the restricted container.
var containers = document.querySelectorAll(".draggable-zone");
const restrcitedWrapper = document.querySelector("[data-kt-draggable-level="restricted"]");
if (containers.length === 0) {
    return false;
}
var droppable = new Droppable.default(containers, {
    draggable: ".draggable",
    dropzone: ".draggable-zone",
    handle: ".draggable .draggable-handle",
    mirror: {
        //appendTo: selector,
        appendTo: "body",
        constrainDimensions: true
    }
});
// Define draggable element variable for permissions level
let droppableOrigin;
// Handle drag start event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragEvent.html
droppable.on("drag:start", (e) => {
    droppableOrigin = e.originalSource.getAttribute("data-kt-draggable-level");
});
// Handle drag over event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragOverEvent.html
droppable.on("drag:over", (e) => {
    const isRestricted = e.overContainer.closest("[data-kt-draggable-level="restricted"]");
    if (isRestricted) {
        if (droppableOrigin !== "admin") {
            restrcitedWrapper.classList.add("bg-light-danger");
        } else {
            restrcitedWrapper.classList.remove("bg-light-danger");
        }
    } else {
        restrcitedWrapper.classList.remove("bg-light-danger");
    }
});
// Handle drag stop event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragStopEvent.html
droppable.on("drag:stop", (e) => {
    // remove all draggable occupied limit
    containers.forEach(c => {
        c.classList.remove("draggable-dropzone--occupied");
    });
    // Remove restricted alert
    restrcitedWrapper.classList.remove("bg-light-danger");
});
// Handle drop event -- https://shopify.github.io/draggable/docs/class/src/Droppable/DroppableEvent/DroppableEvent.js~DroppableDroppedEvent.html
droppable.on("droppable:dropped", (e) => {
    const isRestricted = e.dropzone.closest("[data-kt-draggable-level="restricted"]");
    // Detect if drop container is restricted
    if (isRestricted) {
        // Check if dragged element has permission level
        if (droppableOrigin !== "admin") {
            restrcitedWrapper.classList.add("bg-light-danger");
            e.cancel();
        }
    }
});
														
<div class="row row-cols-lg-3 g-10">
    <!--begin::Col-->
    <div class="col">
        <!--begin::Card-->
        <div class="card card-bordered mb-10">
            <!--begin::Card header-->
            <div class="card-header">
                <div class="card-title">
                    <h3 class="card-label">Public Tasks</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Row-->
                <div class="row row-cols-1 g-10 min-h-200px draggable-zone">
                    <!--begin::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-primary">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--begin::Col-->
                    <!--end::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-primary">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--begin::Col-->
                    <!--end::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-primary">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col">
        <!--begin::Card-->
        <div class="card card-bordered">
            <!--begin::Card header-->
            <div class="card-header">
                <div class="card-title">
                    <h3 class="card-label">Public Tasks</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Row-->
                <div class="row row-cols-1 g-10 min-h-200px draggable-zone">
                    <!--begin::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-success">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-success">
                           ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col draggable">
                        <!--begin::Card-->
                        <div class="card bg-light-success">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col">
        <!--begin::Card-->
        <div class="card card-bordered" data-kt-draggable-level="restricted">
            <!--begin::Card header-->
            <div class="card-header">
                <div class="card-title">
                    <h3 class="card-label">Restricted</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Row-->
                <div class="row row-cols-1 g-10 min-h-200px draggable-zone">
                    <!--begin::Col-->
                    <div class="col draggable" data-kt-draggable-level="admin">
                        <!--begin::Card-->
                        <div class="card bg-light-danger">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col draggable" data-kt-draggable-level="admin">
                        <!--begin::Card-->
                        <div class="card bg-light-danger">
                            ...
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Col-->
</div>