Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a7650/vue3-draggable-resizable
[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持元素吸附对齐，实时参考线。
https://github.com/a7650/vue3-draggable-resizable
component conflict-detection drag draggable refline resizable resize typescript vue3
Last synced: 16 days ago
JSON representation
[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持元素吸附对齐，实时参考线。
- Host: GitHub
- URL: https://github.com/a7650/vue3-draggable-resizable
- Owner: a7650
- License: mit
- Created: 2020-11-08T09:54:55.000Z (about 4 years ago)
- Default Branch: release
- Last Pushed: 2023-02-11T23:43:58.000Z (almost 2 years ago)
- Last Synced: 2024-10-25T01:15:36.438Z (20 days ago)
- Topics: component, conflict-detection, drag, draggable, refline, resizable, resize, typescript, vue3
- Language: TypeScript
- Homepage:
- Size: 622 KB
- Stars: 649
- Watchers: 13
- Forks: 126
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue3DraggableResizable
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](LICENSE.md)
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](https://github.com/a7650/vue3-draggable-resizable)
> [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
> [ Vue3 Component ] Draggable and resizable component for vue3, and, support element adsorption alignment, real-time reference line, etc.
[点击查看中文文档](https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md)
## Table of Contents
- [Features](#features)
- [Usage](#Usage)
- [Props](#props)
- [Events](#events)
- [Use adsorption alignment](#Use-adsorption-alignment)
### Features
- Draggable and resizable
- Define handles for resizing
- Restrict movement and size in parent node
- Customize various class names
- Provide your own markup for handles
- Adsorption alignment
- Reference line
### Usage
```bash
$ npm install vue3-draggable-resizable
```
Register the Vue3DraggableResizable
```js
// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// You will have a global component named "Vue3DraggableResizable"
createApp(App)
.use(Vue3DraggableResizable)
.mount('#app')
```
You can also use it separately within the component
```js
// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable }
// ...other
})
```
Here is a complete example of using "vue-template"
```vue
This is a test example
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable },
data() {
return {
x: 100,
y: 100,
h: 100,
w: 100,
active: false
}
},
methods: {
print(val) {
console.log(val)
}
}
})
.parent {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
user-select: none;
}
```
### Props
#### initW
type: `Number`
default: `null`
Set initial width(px)
```html
```
#### initH
type: `Number`
default: `null`
Set initial height(px)
```html
```
#### w
type: `Number`
default: `0`
Current width(px) of the container.
You can use "v-model:w" to keeps it up-to-date
```html
```
#### h
type: `Number`
default: `0`
Current height(px) of the container.
You can use "v-model:h" to keeps it up-to-date
```html
```
#### x
type: `Number`
default: `0`
Current left(px) of the container.
You can use "v-model:x" to keeps it up-to-date
```html
```
#### y
type: `Number`
default: `0`
The current top(px) of the container.
You can use "v-model:y" to keeps it up-to-date
```html
```
#### minW
type: `Number`
default: `20`
Minimum width(px)
```html
```
#### minH
type: `Number`
default: `20`
Minimum height(px)
```html
```
#### active
type: `Boolean`
default: `false`
Indicates whether the component is selected.
You can use "v-model:active" to keeps it up-to-date
```html
```
#### draggable
type: `Boolean`
default: `true`
Defines the component can be draggable or not
```html
```
#### resizable
type: `Boolean`
default: `true`
Defines the component can be resizable or not
```html
```
#### lockAspectRatio
type: `Boolean`
default: `false`
The `lockAspectRatio` property is used to lock aspect ratio.
```html
```
#### disabledX
type: `Boolean`
default: `false`
Defines the component can be moved on x-axis or not
```html
```
#### disabledY
type: `Boolean`
default: `false`
Defines the component can be moved on y-axis or not
```html
```
#### disabledW
type: `Boolean`
default: `false`
Defines the component`s width can be modify or not
```html
```
#### disabledH
type: `Boolean`
default: `false`
Defines the component`s height can be modify or not
```html
```
#### parent
type: `Boolean`
default: `false`
Restrict movement and size within its parent node
```html
```
#### handles
type: `Array`
default: `['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']`
Define the array of handles to restrict the element resizing
- `tl` : Top left
- `tm` : Top middle
- `tr` : Top right
- `mr` : Middle right
- `ml` : Middle left
- `bl` : Bottom left
- `bm` : Bottom middle
- `br` : Bottom right
```html
```
#### classNameDraggable
type: `String`
default: `draggable`
Used to set the custom `class` of a draggable-resizable component when `draggable` is enable.
```html
```
#### classNameResizable
type: `String`
default: `resizable`
Used to set the custom `class` of a draggable-resizable component when `resizable` is enable.
```html
```
#### classNameDragging
type: `String`
default: `dragging`
Used to set the custom `class` of a draggable-resizable component when is dragging.
```html
```
#### classNameResizing
type: `String`
default: `resizing`
Used to set the custom `class` of a draggable-resizable component when is resizing.
```html
```
#### classNameActive
type: `String`
default: `active`
Used to set the custom `class` of a draggable-resizable component when is active.
```html
```
#### classNameHandle
type: `String`
default: `handle`
Used to set the custom common `class` of each handle element.
```html
```
following handle nodes will be rendered
```html
...
...
```
### Events
#### activated
payload: `-`
```html
```
#### deactivated
payload: `-`
```html
```
#### drag-start
payload: `{ x: number, y: number }`
```html
```
#### dragging
payload: `{ x: number, y: number }`
```html
```
#### drag-end
payload: `{ x: number, y: number }`
```html
```
#### resize-start
payload: `{ x: number, y: number, w: number, h: number }`
```html
```
#### resizing
payload: `{ x: number, y: number, w: number, h: number }v`
```html
```
#### resize-end
payload: `{ x: number, y: number, w: number, h: number }`
```html
```
### Use-adsorption-alignment
You need to import another component to use the "adsorption alignment" feature.
This can be used as follows.
```vue
Test
Another test
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// This component is not exported by default
// If you used "app.use(Vue3DraggableResizable)"，then you don't need to import it, you can use it directly.
import { DraggableContainer } from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable, DraggableContainer }
})
.parent {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
user-select: none;
}
```
### DraggableContainer Props
These props apply to DraggableContainer
#### disabled
type: `Boolean`
default: `false`
Disable this feature
```html
Test
Another test
```
#### adsorbParent
type: `Boolean`
default: `true`
Adsorption near parent component
```html
Test
Another test
```
#### adsorbCols
type: `Array`
default: `null`
Custom guides(column)
```html
Test
Another test
```
#### adsorbRows
type: `Array`
default: `null`
Custom guides(row)
```html
Test
Another test
```
#### referenceLineVisible
type: `Boolean`
default: `true`
reference line visible
```html
Test
Another test
```
#### referenceLineColor
type: `String`
default: `#f00`
reference line color
```html
Test
Another test
```