v-drag - a supler simple, Vue.js draggable component.
Demo: https://branu-ws.github.io/v-drag/
Installation
npm:
npm install @branu-jp/v-drag
yarn:
yarn add @branu-jp/v-drag --save
Use
Node.js env (such a .vue components):
<template>
<div>
<div style="position: absolute;" v-drag>
</div>
</div>
</template>
<script>
import drag from '@branu-jp/v-drag'
export default {
directives: {
drag
}
}
</script>
Browser env: coming soon.
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 referes 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 viewpor by using the window-only modifier like so:
<div v-drag.window-only>
This element cannot be dragged outside the window
</div>
Other
Built by, for and at BRANU. Our open source projects can be found on our npm page: https://www.npmjs.com/org/branu-jp
v-drag npm link: https://www.npmjs.com/package/@branu-jp/v-drag