Multi type drop zone

Instead accept a single type of input. A drop zone can be configured to accept a list of inputs. And each of them can have different filter set.

Setup

Instead of accepting one type of items in previous example.

A Drop zone can have multi drop item at once by passing it as array

// type BallDataType = [item: string, from: string]
type BallDataType = [item: string, type: 'ball', from: string]
export const BallType = createType<BallDataType>()

type PaperDataType = [item: string, type: 'paper', from: string]
export const PaperType = createType<PaperDataType>()

const { propsItem, hoverState } = useDroppable(
    // BallType.withFilter(([item, source]) => source !== props.index),
    [
        BallType.withFilter(([item, type, source]) => source !== props.index),
        PaperType.withFilter(([item, type, source]) => source !== props.index)
    ],
    {
        onDrop: (ev, [data, type, source]) => {
            // console.log(`${data} from ${source} is dropped into ${props.index}`)
            // emit('drop', [data,props.index])
            console.log(`${type} ${data} from ${source} is dropped into ${props.index}`)
            emit('drop', [data, type, props.index])
        }
    }
);

The data that onDrop received will be a union of all types specified and can be handled safely with typescript Discriminating Unions

Result

You can only drag item into the box specified

example Source

HTML Pointer