vue2-dragged

A simple Vue 2 directive plugin for drag event detection

Direct include

Simply include vue2-dragged after Vue and it will install itself automatically:

<script src="vue.min.js"></script>
<script src="vue2-dragged.umd.min.js"></script>

CDN

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-dragged"></script>

NPM

npm install vue2-dragged --save

When used with a module system, you must explicitly install the component via Vue.use():

import Vue from 'vue'
import VueDragged from 'vue2-dragged'

Vue.use(VueDragged)

You don't need to do this when using global script tags.

Nuxt.js

npm install vue2-dragged --save

When create file plugins/vue2-dragged.js:

import Vue from 'vue'
import VueDragged from 'vue2-dragged'

Vue.use(VueDragged)

Then, add the file inside the plugins key of nuxt.config.js:

module.exports = {
  //...
  plugins: [
    '~/plugins/vue2-dragged'
  ],
  //...
}

Event

The argument passed to the event handler is an object containing the following properties:

el

• The target element on which the directive binds.
• type: HTMLElement

first

• A boolean to indicate whether it is the first move of the drag. (drag starts here).
• type: Boolean

last

• A boolean to indicate whether it is the last move of the drag. (drag ends here).
• type: Boolean

deltaX

• The change of the pointer (mouse/touch)'s x coordinate from the last position. It is undefined when first or last is true.
• type: Number

deltaY

• The change of the pointer (mouse/touch)'s y coordinate from the last position. It is undefined when first or last is true.
• type: Number

offsetX

• The change of the pointer (mouse/touch)'s x coordinate from the starting position. It is undefined when first or last is true.
• type: Number

offsetY

• The change of the pointer (mouse/touch)'s y coordinate from the starting position. It is undefined when first or last is true.
• type: Number

clientX

• Current x coordinate of the pointer (mouse/touch).
• type: Number

clientY

• Current y coordinate of the pointer (mouse/touch).

• type: Number

Sample

<template>
  <div id="app">
    <img class="image" :src="image" v-dragged="onDragged" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      image: "https://picsum.photos/id/237/300"
    };
  },
  methods: {
    onDragged({ el, deltaX, deltaY }) {
      const { left, top } = window.getComputedStyle(el);

      el.style.left = parseFloat(left) + deltaX + "px";
      el.style.top = parseFloat(top) + deltaY + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  .image {
    position: absolute;
  }
}
</style>

Contributing

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT