Can one drop zone have multiple namespaces so that it can accept different types of items?

[niaodan2b]

If not, is there a way to do so?

In my case, I have 2 types of draggable: a and b. And there are 3 drop zones: zone A that only accepts a, zone B that only accepts b, and zone C that accepts both. How can I do that?

[Aletheios]

Hello,

If you don't have a more complicated setup than the one you described, you could simply not assign a namespace to zone C to make it accept all draggables.

If you need zone C to specifically accept a or b, you could use dynamic namespaces in combination with the drag-start event - simply change the dynamic namespace to the namespace of the item currently being dragged:

<div v-draggable:namespaceA="myData1" @drag-start="() => (namespaceC = 'namespaceA')" />
<div v-draggable:namespaceB="myData2" @drag-start="() => (namespaceC = 'namespaceB')" />

<div v-droppable:namespaceC.dynamic />

data() {
    return {
        namespaceC: ''
    };
}