# vue-move-drag

> Move/Drag a DOM to another position.

Latest version **1.0.1** (published 2020-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-move-drag
pnpm add vue-move-drag
yarn add vue-move-drag
bun add vue-move-drag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-12-26 |
| First published | 2020-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | evgo2017 |
| Maintainers | evgo2017 |
| Keywords | vue, move, drag, directive |

## Links

- npm: https://www.npmjs.com/package/vue-move-drag
- Repository: https://github.com/evgo2017/vue-move-drag
- Issues: https://github.com/evgo2017/vue-move-drag/issues
- npm.io page: https://npm.io/package/vue-move-drag

## Recent versions

- 1.0.1 (latest) — 2020-12-26
- 1.0.0 — 2020-12-26

## README

# vue-move-drag

[![version](https://img.shields.io/npm/v/vue-move-drag)](https://npm.js) ![license](https://img.shields.io/github/license/evgo2017/vue-move-drag) [![downloads](https://img.shields.io/npm/dt/vue-move-drag)](<https://www.npmjs.com/package/vue-move-drag> ) [![fork](https://img.shields.io/github/forks/evgo2017/vue-move-drag?style=social)](https://github.com/evgo2017/vue-move-drag)

[中文](./README-CN.md) | English

Move or Drag a DOM to another position.

## Demo

Full Usage Features:

https://evgo2017.com/repo/vue-move-drag

## Install && Use

```javascript
// npm or yarn
npm install vue-move-drag

// main.js
import vueMoveDrag from 'vue-move-drag'
Vue.use(vueMoveDrag)
```

```vue
// 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

1. Directive will add draggable property to the DOM, and set its position to fixed.
2. When unbind, directive will remove the resize event from window.

## License

MIT - By evgo2017

---
_Source: https://npm.io/package/vue-move-drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._