Installations

npm install vue-draggable-resizable-gorkys-percentage-next

Developer Guide

BETA

Typescript

No

Module System

CommonJS, UMD

Min. Node Version

>= 4.0.0

Node Version

18.15.0

NPM Version

9.5.0 Pull Requests

Open

6

Total

8

Closed

1

Merged

1

Issues

Open

44

Total

94

Closed

50

Releases

Unable to fetch releases

Languages

4

JavaScript

Vue

CSS

HTML

JavaScript (73%)

Vue (24.26%)

CSS (2.39%)

HTML (0.34%)

Developer

gorkys

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

1,241 Stars

62 Commits

239 Forks

21 Watchers

2 Branches

2 Contributors

Updated on Jul 11, 2025

Maintainers

1

View All 2 Contributors

Package Meta Information

Latest Version

2.5.2

Package Id

vue-draggable-resizable-gorkys-percentage-next@2.5.2

Unpacked Size

192.47 kB

Size

68.51 kB

File Count

17

NPM Version

9.5.0

Node Version

18.15.0

Published on

Dec 21, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

4

core-js tiny-emitter vue vue-demi

Dev Dependencies

28

VueDraggableResizable 2

新增特征✨

辅助线(新)
元素对齐(新)
冲突检测
吸附对齐
默认样式优化

Q交流群：138146781

说明

说明：组件基于vue-draggable-resizable进行二次开发

距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。

所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。

功能预览

英文版演示地址 | 中文版演示地址

注意：英文版为官方原版，没有新增功能的演示。中文版为google翻译版本，新增功能在高级目录下可查看

新增Props

handleInfo
类型: Object
必需: false
默认: { size: 8, offset: -5, switch: true }

当使用transform:scale()进行缩放操作时，其中switch为是否让handle始终保持视觉效果不变,size为handle的大小(宽高相同), offset为handle的位置偏移，通常在自定义handle样式时需要设置。

1<vue-draggable-resizable :handle-info="{size: 14,offset: -5,switch: true}" />

scaleRatio
类型: Number
必需: false
默认: 1

当使用transform:scale()进行缩放操作时，用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况

详见:Issues

1<vue-draggable-resizable :scale-ratio="0.6" />

isConflictCheck
类型: Boolean
必需: false
默认: false

定义组件是否开启冲突检测。

1<vue-draggable-resizable :is-conflict-check="true" />

snap
类型: Boolean
必需: false
默认: false

定义组件是否开启元素对齐。

1<vue-draggable-resizable :snap="true" />

snapTolerance
类型: Number
必需: false
默认: 5

当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位。

1<vue-draggable-resizable :snap="true" :snap-tolerance="20" />

新增Events

refLineParams
参数: params

返回参数是一个Object,里面包含vLine与hLine，具体使用参考下面代码。

1<div>
2  <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
3  <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
4  <span class="ref-line v-line"
5      v-for="item in vLine"
6      v-show="item.display"
7      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
8  />
9  <span class="ref-line h-line"
10      v-for="item in hLine"
11      v-show="item.display"
12      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
13  />
14</div>
15
16<script>
17import VueDraggableResizable from 'vue-draggable-resizable'
18import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
19
20export default {
21  name: 'app',
22  components: {
23    VueDraggableResizable
24  },
25  data () {
26    return {
27      vLine: [],
28      hLine: []
29    }
30  },
31  methods: {
32    getRefLineParams (params) {
33      const { vLine, hLine } = params
34      this.vLine = vLine
35      this.hLine = hLine
36    }
37  }
38}
39</script>
40

其它属性

英文版 | 中文版

注意：英文版为官方原版，中文版为google翻译版本

安装使用

1$ npm install --save vue-draggable-resizable-gorkys

全局注册组件

1//main.js
2import Vue from 'vue'
3import vdr from 'vue-draggable-resizable-gorkys'
4
5// 导入默认样式
6import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
7Vue.component('vdr', vdr)

局部注册组件

1<template>
2  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
3    <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
4      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
5      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
6    </vdr>
7    <vdr
8      :w="200"
9      :h="200"
10      :parent="true"
11      :debug="false"
12      :min-width="200"
13      :min-height="200"
14      :isConflictCheck="true"
15      :snap="true"
16      :snapTolerance="20"
17    >
18    </vdr>
19  </div>
20</template>
21
22<script>
23import vdr from 'vue-draggable-resizable-gorkys'
24import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
25export default {
26  components: {vdr},
27  data: function () {
28    return {
29      width: 0,
30      height: 0,
31      x: 0,
32      y: 0
33    }
34  },
35  methods: {
36    onResize: function (x, y, width, height) {
37      this.x = x
38      this.y = y
39      this.width = width
40      this.height = height
41    },
42    onDrag: function (x, y) {
43      this.x = x
44      this.y = y
45    }
46  }
47}
48</script>

License

The MIT License (MIT). Please see License File for more information.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More