Skip to content
Vue draggable component (v-drag). Vue.jsのドラッガブル ディレクティブ (v-drag)
JavaScript
Branch: master
Clone or download
Latest commit 1c6bde4 Aug 24, 2018
Permalink
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.md Readme tweaks (#15) Aug 24, 2018
package-lock.json Add bounding check (#14) Aug 18, 2018
package.json

README.md

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 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>

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

You can’t perform that action at this time.