A Vue.js draggable directive


stars 🌟issues ⚠updated 🛠created 🐣size 🏋‍♀
3010Jun 18, 2019Mar 8, 2018Minified + gzip package size for @branu-jp/v-drag in KB


v-drag - a supler simple, Vue.js draggable component.

Demo: https://branu-ws.github.io/v-drag/



npm install @branu-jp/v-drag


yarn add @branu-jp/v-drag --save


Node.js env (such a .vue components):

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

import drag from '@branu-jp/v-drag'

export default {
  directives: {

Browser env: coming soon.


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 referes to an id as argument to v-drag.

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

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


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.