.draggable-zoneand define draggable elements with
											.draggableand let drag & drop through
											.draggable-handleelement.
var containers = document.querySelectorAll(".draggable-zone");
if (containers.length === 0) {
    return false;
}
var swappable = new Sortable.default(containers, {
    draggable: ".draggable",
    handle: ".draggable .draggable-handle",
    mirror: {
        //appendTo: selector,
        appendTo: "body",
        constrainDimensions: true
    }
});
														
<div class="row row-cols-lg-2 g-10 draggable-zone">
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
</div>