Vue3 Dn

Document

vue3-dnd.com

React Dnd implementation in Vue Composition-api.

Supports Vue2 and Vue3

If you think this project is helpful to you, I hope you can contribute a star⭐


中文 | English

Using

``
npm install vue3-dnd
yarn add vue3-dnd
pnpm install vue3-dnd
`
`vue
// App.vue


// Home.vue

`

Notice

1. 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:

`ts
import { useDrag } from 'vue3-dnd'
import { toRefs } from '@vueuse/core'

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)
// using vueuse toRefs api
const { opacity } = toRefs(collect)
// bad
const { opacity } = collect.value
`

2. The drag drop dragPreview ref is a function, using template please using v-bind:ref="drag", You can also set the value to it using a new function
`vue


`

example

$3

`vue

`
#### Example.vue
`vue



`

Q/A

$3

A: Check if your spec or item is a function, If your item is a static object, you really don't get reactive data changes during drag and drop

`ts
// The following situations may result in don't have reactive
const [collect, connectDrag] = useDrag({
type: 'box',
item: { id: props.id },
})
// The correct way to write it
const [collect, connectDrag] = useDrag({
type: 'box',
item: () => ({ id: props.id }),
})
const [collect, connectDrag] = useDrag(() => ({
type: 'box',
item: { id: props.id },
}))
``

Contributors

Made with contrib.rocks.

Thanks

React-Dnd