https://github.com/mrfade/vue-drag-drop-snap

A dependency-free Vue component, that allows you to drag and drop elements and snap them to specified positions like Discord
https://github.com/mrfade/vue-drag-drop-snap

dnd drag drag-and-drop drop vue vuejs

Last synced: about 2 months ago
JSON representation

A dependency-free Vue component, that allows you to drag and drop elements and snap them to specified positions like Discord

• Host: GitHub
• URL: https://github.com/mrfade/vue-drag-drop-snap
• Owner: mrfade
• License: mit
• Created: 2022-03-24T11:24:35.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-03-30T10:19:14.000Z (about 2 years ago)
• Last Synced: 2024-03-24T09:03:14.955Z (2 months ago)
• Topics: dnd, drag, drag-and-drop, drop, vue, vuejs
• Language: Vue
• Homepage: https://mrfade.github.io/vue-drag-drop-snap/
• Size: 518 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-drag-drop-snap - A dependency-free Vue component for drag and drop with snapping. (Components & Libraries / UI Components)
• awesome-vue - vue-drag-drop-snap - A dependency-free Vue component for drag and drop with snapping. (Components & Libraries / UI Components)

README

        
# vue-drag-drop-snap

A dependency-free Vue component, that allows you to drag and drop elements and snap them to specified positions. Inspired by [vue-drag-it-dude](https://github.com/Esvalirion/vue-drag-it-dude)

[![npm](https://badgen.net/npm/v/vue-drag-drop-snap)](https://www.npmjs.com/package/vue-drag-drop-snap)

[![npm](https://badgen.net/npm/dm/vue-drag-drop-snap)](https://www.npmjs.com/package/vue-drag-drop-snap)

[![npm](https://badgen.net/npm/dt/vue-drag-drop-snap)](https://www.npmjs.com/package/vue-drag-drop-snap)

[![npm](https://badgen.net/npm/license/vue-drag-drop-snap)](https://www.npmjs.com/package/vue-drag-drop-snap)

![vue-drag-drop-snap](https://badgen.net/bundlephobia/min/vue-drag-drop-snap)

## Install

```bash

npm install vue-drag-drop-snap

or

yarn add vue-drag-drop-snap

```

## Usage

```js

import VueDragDropSnap from 'vue-drag-drop-snap'

export default {

  components: {

    VueDragDropSnap

  }

};

```

```html



  

    

  



.wrapper {

  position: relative;

}

```

> Note: Don't forget to add `position: relative;` to the parent (`.wrapper`) element.

## Docs

See the full api docs and examples here: [https://mrfade.github.io/vue-drag-drop-snap/](https://mrfade.github.io/vue-drag-drop-snap/)

## License

[MIT license](LICENSE)