Easy-DnD

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 395)

A drag and drop implementation for Vue.js 2 and 3 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz

Easy-DnD Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue Easy DnD — Vue 3 Drag and Drop Library

Vue Easy DnD is a lightweight Vue 3 drag-and-drop component library for mouse and touch interfaces.

Use it to build sortable lists, nested drop zones, dashboards, card transfers, and custom drag-and-drop workflows with TypeScript, SSR, and Nuxt support.

## What this package helps with

- Make a source item draggable with `Drag`
- Make a target accept dropped items with `Drop`
- Build reorderable lists with `DropList` (drag to reorder, or move between lists)
- Ignore drops in specific zones using `DropMask`
- Use `useDrag`, `useDrop`, and `useDragAware` when you need custom logic instead of a full component
- Restrict what can be dropped using type/data rules (`accepts-type` and `accepts-data`)
- Support copy/cut-style interactions and list events like `reorder` and `insert`
- Customize the drag preview with `drag-image`

## Install

```bash
npm install vue-easy-dnd@^3
```

Vue `^3.2.25` is required.
The distributed JavaScript targets ES2022.

## Quick example

```vue
<script setup>
import { Drag, Drop, useDragAware } from 'vue-easy-dnd'
import 'vue-easy-dnd/style.css'

const { dragInProgress } = useDragAware()

function handleDrop(event) {
  console.log('Dropped item:', event.data)
}
</script>

<p v-if="dragInProgress">Drag in progress</p>
</template>
```

For examples like dashboards, nested zones, and full list workflows, use the linked docs and demos.

## Docs and examples

### [View Documentation](https://rlemaigre.github.io/Easy-DnD/)

- [All demos](https://rlemaigre.github.io/Easy-DnD/advanced-demos.html)
- [Version 3 migration guide](https://rlemaigre.github.io/Easy-DnD/changelog.html)
- [Dashboard demo on homepage](https://rlemaigre.github.io/Easy-DnD/#try-the-dashboard-demo)

Easy-DnD

Easy-DnD Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Easy-DnD

Easy-DnD Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README