v-drag

A super simple, Vue.js draggable component.

Installation

$ npm i @geospoc/v-drag

Usage

<template>
  <div>
    <div style="position: absolute;" v-drag>
    </div>
  </div>
</template>

<script>
import drag from '@geospoc/v-drag';

export default {
  directives: {
    drag,
  },
};
</script>

Notes

An element with v-drag must have position: absolute; to be draggable.

Options

You may desire only one part of an element to be draggable. You can achieve this by passing a string which refers to an id as argument to v-drag.

<div id="header">
  <div v-drag:header>
    <div>
      Some text
    </div>
  </div>
</div>

This will result in any area that is not <div id="header"> not becoming draggable. One common use case is a modal, that is only draggable when the top area is clicked.

You can constrain the draggable object from leaving the viewport by using the window-only modifier like so:

<div v-drag.window-only>
  This element cannot be dragged outside the window
</div>

Credits

• Thanks to @branu-ws & their original v-drag
• All contributors (list).
• All GeoSpoc (team).

License

MIT © GeoSpoc

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request