# vue3-drag-utils

> ## Brief

Latest version **0.0.4** (published 2023-05-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-drag-utils
pnpm add vue3-drag-utils
yarn add vue3-drag-utils
bun add vue3-drag-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-05-06 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 681.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | huyikai |
| Keywords | drag, drag&drop, vue-dnd, vue3-drag |

## Links

- npm: https://www.npmjs.com/package/vue3-drag-utils
- Repository: https://github.com/vue-drag/vue3-drag-utils
- Homepage: https://vue-drag.github.io/vue3-drag-utils
- Issues: https://github.com/vue-drag/vue3-drag-utils/issues
- npm.io page: https://npm.io/package/vue3-drag-utils

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [vue3-dnd](https://npm.io/package/vue3-dnd.md) ^2.0.2
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.13.0
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^16.0.1
- [@vitepress-custom/vitepress-plugin-sidebar](https://npm.io/package/@vitepress-custom/vitepress-plugin-sidebar.md) ^0.0.8

## Recent versions

- 0.0.4 (latest) — 2023-05-06
- 0.0.3 — 2023-05-06
- 0.0.2 — 2023-04-25
- 0.0.1 — 2023-04-25
- 0.0.0 — 2023-04-25

## README

# Vue3-Drag-Utils

## Brief

Experience better drag and drop tools

## Features

- Drag move or clone
- Disabled

## ToDo

- Multi-select Drag and Drop
- Nested Drag and Drop
- transition

## Usage

```shell
npm i vue3-drag-utils
```

```javascript
// main.js
import { createApp } from 'vue';
import vue3dragutils from 'vue3-drag-utils';
import 'vue3-drag-utils/es/style.css';
const app = createApp(App);
app.use(vue3dragutils);
app.mount('#app');
```

```vue
<!-- App.vue -->
<template>
  <DndProvider>
    <RouterView />
  </DndProvider>
</template>
```

```vue
<!-- Example.vue -->
<template>
  <draggable
    v-model:list="list"
  >
    <template #item="{ data, index }">
      <div>{{ data.name }}</div>
    </template>
  </draggable>
</template>
```



## Develop

```shell
git clone https://github.com/huyikai/vue3-drag-utils
cd packages/vue3-drag-utils
# Do some development
npm run build
```

## License

[MIT](./license)

## Repository
https://github.com/huyikai/vue3-drag-utils

---
_Source: https://npm.io/package/vue3-drag-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._