# @nocyoung/vue-draggable

> Vue Drag and Drop component which can be used for PC and H5 without any dependency. Native HTML5 drag and drop implementation made for Vue.

Latest version **1.0.6** (published 2022-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nocyoung/vue-draggable
pnpm add @nocyoung/vue-draggable
yarn add @nocyoung/vue-draggable
bun add @nocyoung/vue-draggable
```

## 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.6 |
| Published | 2022-02-09 |
| First published | 2019-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nocyoung |
| Maintainers | nocyoung |
| Keywords | vue, vuejs, drag, drop, draggable, component |

## Links

- npm: https://www.npmjs.com/package/@nocyoung/vue-draggable
- npm.io page: https://npm.io/package/@nocyoung/vue-draggable

## Recent versions

- 1.0.6 (latest) — 2022-02-09
- 1.0.5 — 2020-07-30
- 1.0.4 — 2020-04-29
- 1.0.3 — 2020-04-29
- 1.0.2 — 2019-12-11
- 1.0.1 — 2019-12-11
- 1.0.0 — 2019-12-11

## README

# vue-draggable

Vue Drag and Drop component which can be used for PC and H5 without any dependency.
Native HTML5 drag and drop implementation made for Vue.

[npm-url]: https://www.npmjs.com/package/@nocyoung/vue-draggable

# Install
yarn add @nocyoung/vue-draggable

# Usage
```
import Draggable from '@nocyoung/vue-draggable';
<Draggable
    :bounds="bounds"
    :defaultPosition="defaultPosition"
    @onUserDragStart="onUserDragStart"
    @onUserDragEnd="onUserDragEnd"
>
    <img
    :src="imgSrc"
    alt="你的图片"
    />
</Draggable>

```
bounds: 拖拽的边界, 为上下左右到左上角的距离, 单位为px, 比如:  
bounds = {
    left: 100;
    right: 100;
    top:0,
    bottom:50
}  
  
defaultPosition: 拖拽元素初始位置, 单位为px, 比如:  
defaultPosition = {
    x: 100,
    y: 200,
}  
  
onUserDragStart: 拖拽开始回调，参数为位置坐标  
onUserDragEnd: 拖放结束回调，参数为位置坐标

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