Vue3 DnD

React Dnd implementation in Vue3

Because of composition-API limitations, please do not attempt to deconstruct assignment for the collect parameter from hooks such as useDrag and useDrop, otherwise it will lose its responsiveness, Such as:

const [collect, drag] = useDrag(() => ({
    type: props.type,
    item: { name: props.name },
    collect: monitor => ({
        opacity: monitor.isDragging() ? 0.4 : 1,
    }),
}))
// good
const opacity = computed(() => unref(collect).opacity)
// bad
const { opacity } = collect.value
const { opactiy } = toRefs(collect.value)