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

Home Page:https://mrfade.github.io/vue-drag-drop-snap/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

npm npm npm npm vue-drag-drop-snap

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

About

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

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

License:MIT License


Languages

Language:Vue 87.7%Language:JavaScript 12.3%