Skip to content
Vue draggable component (v-drag). Vue.jsのドラッガブル ディレクティブ (v-drag)
Branch: master
Clone or download
Latest commit 1c6bde4 Aug 24, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Ensure overlay is abs position and covers entire screen Mar 15, 2018
docs Update demo Mar 15, 2018
lib Add bounding check (#14) Aug 18, 2018
src Add bounding check (#14) Aug 18, 2018
.babelrc Initial commit Mar 8, 2018
.gitignore Add demo project, and improve drag by adding large overlay Mar 11, 2018 Readme tweaks (#15) Aug 24, 2018
package-lock.json Add bounding check (#14) Aug 18, 2018

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




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 refers 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 viewport 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:

v-drag npm link:

You can’t perform that action at this time.