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

Install

npm install vue-drag-drop-snap

or

yarn add vue-drag-drop-snap

Usage

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

export default {
  components: {
    VueDragDropSnap
  }
};

<div class="wrapper">
  <vue-drag-drop-snap
    starting-position="BR"
    :snap-options="{
      'top-left': {
        left: 40,
        top: 40
      },
      'top-right': {
        right: 20,
        top: 20
      },
      'bottom-left': {
        left: 50,
        bottom: 50
      },
      'bottom-right': {
        right: 50,
        bottom: 50
      }
    }"
  >
    <img src="https://picsum.photos/300/200">
  </vue-drag-drop-snap>
</div>

<style>
.wrapper {
  position: relative;
}
</style>

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/

License

MIT license