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
License
Dependencies
Dependencies
@interactjs/types: ^1.9.22@types/jest: ^24.0.19@typescript-eslint/eslint-plugin: ^2.33.0@typescript-eslint/parser: ^2.33.0@vue/cli-plugin-babel: ~4.5.0@vue/cli-plugin-eslint: ~4.5.0@vue/cli-plugin-typescript: ~4.5.0@vue/cli-plugin-unit-jest: ~4.5.0@vue/cli-service: ~4.5.0@vue/eslint-config-prettier: ^6.0.0@vue/eslint-config-typescript: ^5.0.2@vue/test-utils: ^1.0.3eslint: ^6.7.2eslint-plugin-prettier: ^3.1.3eslint-plugin-vue: ^6.2.2interactjs: ^1.9.22lint-staged: ^9.5.0prettier: ^1.19.1sass: ^1.26.5sass-loader: ^8.0.2typescript: ~3.9.3vue-cli-plugin-p11n: ~0.4.0vue-template-compiler: ^2.6.11