# vue-drag-component

> > Vue component for draggable and resize element

Latest version **0.1.9** (published 2020-08-18) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2020-08-18 |
| First published | 2020-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 779.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | SXX19950910 |
| Maintainers | carrysxx |

## Links

- npm: https://www.npmjs.com/package/vue-drag-component
- npm.io page: https://npm.io/package/vue-drag-component

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [loadsh](https://npm.io/package/loadsh.md) ^0.0.4
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [install](https://npm.io/package/install.md) ^0.13.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.1.2
- [vue-highlightjs](https://npm.io/package/vue-highlightjs.md) ^1.3.3
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^2.2.1

## Recent versions

- 0.1.9 (latest) — 2020-08-18
- 0.1.8 — 2020-08-11
- 0.1.5 — 2020-08-11
- 0.1.1 — 2020-07-27
- 0.1.0 — 2020-07-27

## README

# vue-drag-component
> Vue component for draggable and resize element

#### 预览 Preview
https://sxx19950910.github.io/vue-drag-component

#### 安装 Install
    npm i vue-drag-component -S
#### 基本用法 Basic
register
```javascript
   import vueDragComponent from 'vue-drag-component'
   import 'vue-drag-component/dist/vueDragComponent.css'
   Vue.component('vue-drag-component', vueDragComponent)
```
use
```vue
    <vue-drag-component :parent="true" :active.sync="active">
        <div class="box"></div>
    </vue-drag-component>
```
complete
```vue
<template>
    <div id="basic-warp">
        <div class="right-box">
            <vue-drag-component :parent="true" :active.sync="active">
                <div class="box"></div>
            </vue-drag-component>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: false
            }
        }
    }
</script>

<style lang="scss">
    #basic-warp {
        height: 100%;
        display: flex;
        .box {
            width: 100%;
            min-width: 200px;
            min-height: 200px;
            height: 100%;
            border: 1px dashed #333;
        }
    }
</style>
```
#### 属性 Props
名称 name  | 类型 type | 描述 describe | 值 value
 ---- | ----- | ------ | ----  
 z  | Number | 元素的z-index | 0
 left | Number | 元素初始Left | 0
 top | Number | 元素初始Top | 0
 active | Boolean | 激活状态 active state | false
 grid | Array | 网格模式 Grid mode | [0, 0]
 parent | Boolean | 是否以父元素为参照目标，否则为document | false
 resizable | Boolean | 是否启用缩放功能 Whether to enable the zoom function | true
 resizeInstance | Boolean | 是否计算缩放按钮值 Whether to calculate the zoom button value | false
 minWidth | Number | 最小宽度 min width | 0
 minHeight | Number | 最小高度 min Height | 0
 maxHeight | Number | 最大高度 max height | 0
 maxWidth | Number | 最大宽度 max width | 0
 moveEmitDelay | Number | 元素移动事件的节流阈值 Throttle threshold for element movement events | 0
 resizeEmitDelay | Number | 元素缩放事件的节流阈值 Throttle threshold for element zoom event | 0
 draggable | Boolean | 是否启用拖拽 Whether to enable drag and drop | true
 initWidth | Number | 初始宽度 init width | 0
 initHeight | Number | 初始高度 init height | 0
 dragHandle | String | 允许触发拖拽的元素类名 The class name of the element that is allowed to trigger the drag | ''
 dragFilter | String | 不允许出发拖拽的元素类名 The class name of the element that is not allowed to start dragging | ''
 disableUserSelect | Boolean | 是否允许用户选择内容 Whether to allow users to select content | false
 componentData | Object | 绑定的数据值，会通过move，resize等事件给回传过来 The bound data value will be passed back through events such as move and resize | {}
 helpLine | Boolean | 辅助线 help line | false
 lineClass | String | 辅助线的类名 line class name | ''
 handles | Array | ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br'] | [all]
 axis | String | 允许操作方向 Allow operation direction  value: x,y,xy | 'xy',
 draggingClass | String | 拖动时的class Class when dragging | ''
 resizingClass | String | 缩放时的class Class when zooming | ''
 resizeClass | String | 缩放控件的class Zoom control class | ''
 
#### 反馈 Feedback
 > 916411582@qq.com

##### Design By SXX

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