Easy-DnD - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #machine-learning #rust #linux #docker #nodejs #java #kubernetes #pytorch #security #ios #openai

Easy-DnD

(★ 396)

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

File Explorer

Download Latest Version (.zip)

- - deploy.yml
  - quality.yml
- - config.ts
- - drag.md
  - drop.md
  - droplist.md
  - dropmask.md
- - AutoScrollControlsDemo.vue
  - CardTransferDemo.vue
  - CustomDragImageDemo.vue
  - DashboardBuilderDemo.vue
  - DataAcceptanceDemo.vue
  - DragGoBackDemo.vue
  - DragStateDemo.vue
  - DropListTransferDemo.vue
  - DropMaskDemo.vue
  - DropModesDemo.vue
  - DynamicDragImageDemo.vue
  - ExternalHandleDemo.vue
  - FolderDropDemo.vue
  - NestedDropListDemo.vue
  - PositionLockDemo.vue
  - ShadowDomDemo.vue
  - TableToListDemo.vue
  - TypeAcceptanceDemo.vue
  - types.ts
- - favicon.svg
  - vue-easy-dnd-social.png
  - vue-easy-dnd-social.svg
- advanced-demos.md
- changelog.md
- events.md
- faq.md
- index.md
- installation.md
- - index.ts
- LICENSE
- package.json
- README.md
- favicon.ico
- - logo.svg
- - App12Item.vue
  - Atomic.vue
  - Column.vue
  - DropZone.vue
  - Flex.vue
  - Generic.vue
  - MyDiv.vue
  - Row.vue
- - demo.ts
- App.vue
- App10.vue
- App11.vue
- App12.vue
- App13.vue
- App14.vue
- App15.vue
- App16.vue
- App17.vue
- App18.vue
- App19.vue
- App2.vue
- App20.vue
- App21.vue
- App22.vue
- App23.vue
- App24.vue
- App25.vue
- App3.vue
- App4.vue
- App5.vue
- App6.vue
- App7.vue
- App8.vue
- App9.vue
- main.ts
- - dnd.ts
- - public-api.spec.ts
- setup.ts
.gitignore
Easy-DND.iml
eslint.config.ts
index.html
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
tsconfig.lib.json
tsconfig.test.json
vite.config.ts
vite.lib.config.ts
vitest.config.ts

// 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>

<template>
  <Drag type="task" :data="{ id: 1 }">
    <div>Drag this item</div>
  </Drag>

<Drop accepts-type="task" @drop="handleDrop">
    Drop zone
  </Drop>

<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)