# vue-draggable-resizable **Repository Path**: jsdoit/vue-draggable-resizable ## Basic Information - **Project Name**: vue-draggable-resizable - **Description**: Vue2 Component for draggable and resizable elements. - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-07-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

logo

VueDraggableResizable

[![Latest Version on NPM](https://img.shields.io/npm/v/vue-draggable-resizable.svg?style=flat-square)](https://npmjs.com/package/vue-draggable-resizable) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) [![npm](https://img.shields.io/npm/dt/vue-draggable-resizable.svg?style=flat-square)](https://www.npmjs.com/package/vue-draggable-resizable) > Vue 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐 ### Features * 没有依赖 * 可拖动，可调整大小或者两者都行 * 拥有用于调整大小的控制点 * 限制组件调整大小和移动超出父元素 * 自定义网格移动 * 将拖动限制为垂直或水平移动 --- **新增特征** * 组件之间的冲突检测（不允许组件之间重叠） * 组件与组件之间进行对齐（类似于吸附效果） ### Demo [Demo](https://mauricius.github.io/vue-draggable-resizable/) ## 增加冲突检测与元素对齐 ### Props **isConflictCheck**
Type: `Boolean`
Required: `false`
Default: `false` 定义组件是否开启冲突检测。 ```html ``` **snap**
Type: `Boolean`
Required: `false`
Default: `false` 定义组件是否开启元素对齐。 ```html ``` **snapTolerance**
Type: `Number`
Required: `false`
Default: `5` 当调用`snap`时，定义组件与元素之间的对齐距离，以像素为单位。 ```html ``` ## 安装新版本 ```bash $ npm install --save vue-draggable-resizable-gorkys ``` --- ## 原组件文档翻译 ## 安装和基本用法 ```bash $ npm install --save vue-draggable-resizable ``` 注册组件 ```js import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' Vue.component('vue-draggable-resizable', VueDraggableResizable) ``` 现在可以在标记中使用该组件 ```vue ``` ### Props #### active Type: `Boolean`
Required: `false`
Default: `false` 确定组件是否应处于活动状态。 `prop`对更改做出反应，也可以与`sync`[modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) 一起使用以保持状态与父级同步。 ```html ``` #### draggable Type: `Boolean`
Required: `false`
Default: `true` 定义组件应该是否可拖动。 ```html ``` #### resizable Type: `Boolean`
Required: `false`
Default: `true` 定义组件是否可以调整大小。 ```html ``` #### w Type: `Number`
Required: `false`
Default: `200` 定义元素的初始宽度。 ```html ``` #### h Type: `Number`
Required: `false`
Default: `200` 定义元素的初始高度。 ```html ``` #### minw Type: `Number`
Required: `false`
Default: `50` 定义元素的最小宽度。 ```html ``` #### minh Type: `Number`
Required: `false`
Default: `50` 定义元素的最小高度。 ```html ``` #### x Type: `Number`
Required: `false`
Default: `0` 定义元素的初始x位置。 ```html ``` #### y Type: `Number`
Required: `false`
Default: `0` 定义元素的初始y位置。 ```html ``` #### z Type: `Number|String`
Required: `false`
Default: `auto` 定义元素的zIndex。 ```html ``` #### handles Type: `Array`
Required: `false`
Default: `['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']` 定义句柄数组以限制元素大小调整： * `tl` - 左上角 * `tm` - 中上方 * `tr` - 右上角 * `mr` - 右中方 * `br` - 右下角 * `bm` - 下中方 * `bl` - 左下方 * `ml` - 左中方 ```html ``` #### axis Type: `String`
Required: `false`
Default: `both` 定义元素可拖动的轴。可用值为`x`, `y` 或者 `both`. ```html ``` #### grid Type: `Array`
Required: `false`
Default: `[1,1]` 定义捕捉元素的网格。 ```html ``` #### parent Type: `Boolean`
Required: `false`
Default: `false` 将元素的移动和尺寸限制为父元素。 ```html ``` #### dragHandle Type: `String`
Required: `false` 定义应该用于拖动组件的选择器。 ```html ``` #### dragCancel Type: `String`
Required: `false` 定义应该用于阻止拖动初始化的选择器。 ```html ``` #### maximize Type: `Boolean`
Required: `false`
Default: `false` 如果设置为true，则允许组件在双击时填充其父级。 ```html ``` --- ### Events #### activated Required: `false`
Parameters: `-` 单击组件时调用，以显示句柄。 ```html ``` #### deactivated Required: `false`
Parameters: `-` 每当用户单击组件外的任何位置时调用，以便停用它。 ```html ``` #### resizing Required: `false`
Parameters: * `left`元素的X位置 * `top` 元素的Y位置 * `width`元素的宽度 * `height` 元素的高度 每当组件调整大小时调用。 ```html ``` #### resizestop Required: `false`
Parameters: * `left` 元素的X位置 * `top` 元素的Y位置 * `width` 元素的宽度 * `height` 元素的高度 每当组件停止调整大小时调用。 ```html ``` #### dragging Required: `false`
Parameters: * `left` 元素的X位置 * `top` 元素的Y位置 每当拖动组件时调用。 ```html ``` #### dragstop Required: `false`
Parameters: * `left`元素的X位置 * `top` 元素的Y位置 每当组件停止拖动时调用。 ```html ``` ### Gotchas 如果要在其父元素中限制组件，请小心使用x，y，w，h，minh和minh props的适当值。 ### Bonus 如果 `resizing`, `parent` 和`maximize`道具 为`true` ，您可以双击元素以使其填充父级。