vue-interactjs

vue-interactjs

Vue-interactjs is interact.js component for Vue.

Install

NPM

$ npm install vue-interactjs

Yarn

$ yarn add vue-interactjs

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-interactjs/dist/vue-interactjs.umd.js"></script>

Registration

JavaScript

import Vue from "vue";
import VueInteractJs from "vue-interactjs";

Vue.use(VueInteractJs);

// Now the app has started!
new Vue({}).$mount("#app");

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-interactjs/dist/vue-interactjs.umd.js"></script>

<div id="#app">
  Vue.use(window.vueInteractjs)
</div>

Component

<template>
  <interact
    draggable
    :dragOption="dragOption"
    resizable
    :resizeOption="resizeOption"
    class="resize-drag"
    :style="style"
    @dragmove="dragmove"
    @resizemove="resizemove"
  >
    Drag and drop, resize from any edge or corner
  </interact>
</template>

<script>
  import Vue from "vue";
  import interact from "interactjs";

  export default {
    name: "resizeDrag",
    data: () => ({
      resizeOption: {
        edges: { left: true, right: true, bottom: true, top: true }
      },
      dragOption: {
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: "parent",
            endOnly: true
          })
        ],
      },
      // values for interact.js transformation
      x: 0,
      y: 0,
      w: 200,
      h: 200,
    }),

    computed: {
      style() {
        return {
          height: `${this.h}px`,
          width: `${this.w}px`,
          transform: `translate(${this.x}px, ${this.y}px)`,
        };
      }
    },

    methods: {
      dragmove(event) {
        this.x += event.dx;
        this.y += event.dy;
      },
      resizemove(event) {
        this.w = event.rect.width;
        this.h = event.rect.height;

        this.x += event.deltaRect.left;
        this.y += event.deltaRect.top;
      }
    }
  };
</script>

<style scoped>
.resize-drag {
  box-sizing: border-box;
  background: #41b883;

  /* To prevent interact.js warnings */
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
}
</style>

Vue-interactjs component API

<!-- Add draggable / resizable / gesturable, then interact.js events are enabled -->
<!-- Options are passed to interact.js option -->
<interact
  :draggable="draggable"
  :dragOption="dragOption"
  :resizable="resizable"
  :resizeOption="resizeOption"
  :gesturable="gesturable"
  :gestureOption="resizeOption"
/>

<!-- vue-interactjs converts all interact.js events into component events, e.g.: -->
<!-- Event names are lowerCase (same as interact.js) -->
<interact
  draggable
  resizable
  @dragstart="dragstart"
  @dragmove="dragmove"
  @draginertiastart="draginertiastart"
  @dragend="dragend"
  @resizemove="resizemove"
  @ready="ready"
  @hold="hold"
  ...
/>

See Demo

Clone this repository and run command

$ npm run demo

interact.js API

• Guide
• API

License

MIT