is it possible to have a bigger drop capture area but a nested droppable area

[PratikDev]

i was thinking if i can have a bigger dropable area that will capture there was a drop, but the dragged element will be dropped in a nested element of the bigger area check https://codesandbox.io/s/laughing-sound-glkrn3?file=/index.html in the above example, Element one & Element two are bigger areas that aren't working as droppable areas. but I want them to be sensitive on a drop. doesn't matter if the user drops an element on Element one/two, it'll drop the dragged element inside the item. means Element one & Element two will be sensitive on drop, but won't drop the dragged element as its direct child

[arthurshlain]

I have similar issue. I want to use whole vertical space under sortable column as droppable area.

I found a possible solution by using before element:

.my-sortable-area {
    position: relative;
}

.my-sortable::before {
    position: absolute;
    inset: 0;
}

.my-sortable .interactive {
    position: relative;
    z-index: 10;
}

Specifying z-index is needed for any elements that should be interactive inside your area, because before element overlap it by default.

In my case sortable area must be invisible and non-touchable. Because ::before element blocking my mousedown listener for horizontal scroll I disable pointer events and enable it on drag start only:

.my-sortable::before {
    position: absolute;
    inset: 0;
    pointer-events: none; /* no pointer events by default */
}

body.dragging .my-sortable::before {
    pointer-events: auto;
}

var sortable = new Sortable(el, {
    //...
    onStart: function () { 
        document.body.classList.add('dragging'); 
    }, 
    onEnd: function() { 
        document.body.classList.remove('dragging') 
    }
}