vue-move-drag
v1.0.1
Published
Move/Drag a DOM to another position.
Downloads
3
Readme
vue-move-drag
中文 | English
Move or Drag a DOM to another position.
Demo
Full Usage Features:
https://evgo2017.com/repo/vue-move-drag
Install && Use
// npm or yarn
npm install vue-move-drag
// main.js
import vueMoveDrag from 'vue-move-drag'
Vue.use(vueMoveDrag)
// vue
<template>
<div v-move-drag style="top: 50vh; left: 50vw; height: 100px; width: 100px; background: yellowgreen;z-index: 999;"></div>
</template>
// vue event
<template>
<div v-move-drag @drag="handleDrag" style="top: 50vh; left: 50vw; height: 100px; width: 100px; background: yellowgreen;z-index: 999;"></div>
</template>
Advantage
- [x] PC Drag, Mobile Move;
- [x] Window Resize, the DOM will keep the original relative coordinate value; (To demo experience)
- [x] Border, the DOM won't be moved out Window;
- [x] Vue directive are easy to use.
Notice
- Directive will add draggable property to the DOM, and set its position to fixed.
- When unbind, directive will remove the resize event from window.
License
MIT - By evgo2017