# vuedragger

> a vue component used to drag and zoom something

Latest version **1.0.21** (published 2020-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuedragger
pnpm add vuedragger
yarn add vuedragger
bun add vuedragger
```

## 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.21 |
| Published | 2020-07-02 |
| First published | 2019-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 144.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | LittleGrass Wei |
| Maintainers | littlegrass |
| Keywords | vue, draggable |

## Links

- npm: https://www.npmjs.com/package/vuedragger
- npm.io page: https://npm.io/package/vuedragger

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^3.4.3

## Recent versions

- 1.0.21 (latest) — 2020-07-02
- 1.0.20 — 2020-04-30
- 1.0.19 — 2020-04-19
- 1.0.18 — 2020-03-27
- 1.0.17 — 2020-03-19
- 1.0.16 — 2020-03-19
- 1.0.15 — 2020-03-12
- 1.0.14 — 2020-02-04
- 1.0.13 — 2020-01-14
- 1.0.12 — 2020-01-07
- 1.0.11 — 2020-01-07
- 1.0.10 — 2019-12-31
- 1.0.9 — 2019-12-30
- 1.0.8 — 2019-12-30
- 1.0.7 — 2019-12-30
- … 7 more at https://npm.io/package/vuedragger/versions

## README

# vuedragger
My team often gets some requirements such as developing a panel used to view AI results,so I made this component which can be used to drag and zoom something
<div align='center'>
 <img src='https://i.loli.net/2020/07/02/il9WdgrzvsPLUyE.gif' width='600px' height='400px'/>
</div>

## Features 🥢🍚
- Tiny size(7.5KB gzipped 📦)
- Easy to use and understand 🛠

## Usage 📝
```bash
$ npm i vuedragger --save-dev
```    

Register in Vue and to do:
```vue
<template>
  <div id="app">
    <VueDragger :useZoom="true" :useGrid="true" :defaultPosition="{ top: 400, left: 400 }" :w="200" :h="200">
      <h1>233333</h1>
    </VueDragger>
  </div>
</template>

<script>
import VueDragger from 'vuedragger';
export default {
  name: 'app',
  components: {
    VueDragger
  }
}
</script>

```

### Props

Each prop has its default value, you may also not to set them 🍌

#### w
Type: `Number`,<br>
Default: `100`

Define the width of the element
```html
<VueDragger :w="200">
```

#### h
Type: `Number`,<br>
Default: `100`

Define the height of the element
```html
<VueDragger :h="200">
```

#### defaultPosition
Type: `Object`,<br>
Default: `{ top: 0, left: 0 }`

Define the defaultPosition of the element
```html
<VueDragger :defaultPosition="{ top: 200, left: 200 }">
```

#### parentLimitation
type: `Boolean`, <br>
default: `true`

Define whether the element can cross the boundary of its parent element
```html
<VueDragger :parentLimitation="false">
```

#### areaLimits
Type: `Object`,<br>
Default: `{ minTop: null, maxTop: null, minRight: null, maxRight: null, minBottom: null, maxBottom: null, minLeft: null, maxLeft: null }`

Define the scope that the element can move
```html
<VueDragger :areaLimits="{ minTop: 100, maxTop: 100, minRight: 100, maxRight: 100, minBottom: 100, maxBottom: 100, minLeft: 100, maxLeft: 100 }">
```

#### useZoom
type: `Boolean`,<br>
default: `true`

Enable the element to zoom by scrolling
```html
<VueDragger :useZoom="false">
```

#### zIndex
type: `Number`,<br>
default: `10`

Define z-index of the element
```html
<VueDragger :zIndex="11">
```

#### useGrid
type: `Boolean`,<br>
default: `false`

Define weather the element should snap to the grid
```html
<VueDragger :useGrid="true">
```

#### gridX
type: `Number`,<br>
default: `100`

Define the width of the grid
```html
<VueDragger :gridX="150">
```

#### gridY
type: `Number`,<br>
default: `100`

Define the height of the grid
```html
<VueDragger :gridY="150">
```

### Events

#### clicked
Parameters: Original handler

Called when the element was clicked
```html
<VueDragger @clicked="clickedHandle">
```

#### move
Parameters: `{ top: xxx, left: xxx }`

Called when the element move
```html
<VueDragger @clicked="moveHandle">
```

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