A super simple, Vue.js draggable component.
$ npm i @geospoc/v-drag
<template>
<div>
<div style="position: absolute;" v-drag>
</div>
</div>
</template>
<script>
import drag from '@geospoc/v-drag';
export default {
directives: {
drag,
},
};
</script>
An element with v-drag
must have position: absolute;
to be draggable.
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>
MIT © GeoSpoc
Please contribute using Github Flow. Create a branch, add commits, and open a pull request