Vue Dnd

Getting started

Prerequisites

  • Vue 3.x

Setup environments

Install dependency

Run the following command in a vue 3 project.

npm install @mmis1000/vue-dnd

yarn install @mmis1000/vue-dnd

Add a provider

Install one of the provider on the top level of your project

HTML provider

supports file upload but don't really works with touch devices

  <script setup>
+ import { useHtmlProvider } from '@mmis1000/vue-dnd'
+ useHtmlProvider()
  </script>

  <template>
+   <HtmlProvider>
      <Page>
+   </HtmlProvider>
  </template>
  <script setup>
+ import { HtmlProvider } from '@mmis1000/vue-dnd'
  </script>

Pointer event provider

works with touch devices, but don't support file upload

  <script setup>
+ import { usePointerEventProvider } from '@mmis1000/vue-dnd'
+ usePointerEventProvider()
  </script>

  <template>
+   <PointerEventProvider>
      <Page>
+   </PointerEvenProvider>
  </template>
  <script setup>
+ import { PointerEvenProvider } from '@mmis1000/vue-dnd'
  </script>