https://github.com/IsraelZablianov/draggable-vue-directive
Vue2 directive that handles drag & drop
https://github.com/IsraelZablianov/draggable-vue-directive
directive drag-and-drop draggable draggable-vue-directive drd move npm typescript vue-directive vue2 vuejs vuejs2 web
Last synced: 5 months ago
JSON representation
Vue2 directive that handles drag & drop
- Host: GitHub
- URL: https://github.com/IsraelZablianov/draggable-vue-directive
- Owner: IsraelZablianov
- License: mit
- Created: 2018-02-10T14:06:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-11T15:34:34.000Z (almost 6 years ago)
- Last Synced: 2024-04-23T23:47:00.235Z (over 1 year ago)
- Topics: directive, drag-and-drop, draggable, draggable-vue-directive, drd, move, npm, typescript, vue-directive, vue2, vuejs, vuejs2, web
- Language: TypeScript
- Homepage:
- Size: 68.4 KB
- Stars: 314
- Watchers: 13
- Forks: 52
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue - draggable-vue-directive - A simple directive to handle drag and drop of any Vue component. (Components & Libraries / UI Components)
- awesome-vue - draggable-vue-directive - Vue2 directive that handles drag & drop ` 📝 a year ago` (UI Components [🔝](#readme))
- awesome-vue-zh - 拖动-Vue指令性 - 一个简单的指令,用于处理任何Vue组件的拖放. (UI组件 / 形成)
- awesome-vue - draggable-vue-directive ★145 - A simple directive to handle drag and drop of any Vue component. (UI Components / Form)
- awesome-vue - draggable-vue-directive - A simple directive to handle drag and drop of any Vue component. (UI Components / Form)
README
draggable-vue-directive
[](https://github.com/IsraelZablianov/draggable-vue-directive/issues?q=is%3Aopen+is%3Aissue)
[](https://www.npmjs.com/package/draggable-vue-directive)
[](https://www.npmjs.com/package/draggable-vue-directive)
[](https://www.npmjs.com/package/draggable-vue-directive)
[](http://packagequality.com/#?package=draggable-vue-directive)
[](https://vuejs.org/)
[](https://github.com/IsraelZablianov/draggable-vue-directive/blob/master/LICENSE.md)
Vue directive (Vue.js 2.x) for handling element drag & drop.
## Installation
```console
npm install draggable-vue-directive --save
```
## Demo
You can view the live demo here: https://israelzablianov.github.io/draggable-demo
## Examples
### Without Handler
``` html
classic draggable
```
`.vue` file:
``` js
import { Draggable } from 'draggable-vue-directive'
...
export default {
directives: {
Draggable,
},
...
```
### With Handler
``` html
drag and drop using handler
```
`.vue` file:
``` js
import { Draggable } from 'draggable-vue-directive'
...
export default {
directives: {
Draggable,
},
data() {
return {
handleId: "handle-id",
draggableValue: {
handle: undefined
}
};
},
mounted() {
this.draggableValue.handle = this.$refs[this.handleId];
}
...
```
## `draggable` Value
The object passed to the directive is called the directive’s value.
For example, in `v-draggable="draggableValue"`, `draggableValue` can be an object containing the folowing fields:
* [`handle`](#handle)
* [`onPositionChange`](#onpositionchange)
* [`onDragEnd`](#ondragend)
* [`onDragStart`](#ondragstart)
* [`resetInitialPos`](#resetinitialpos)
* [`initialPosition`](#initialposition)
* [`stopDragging`](#stopdragging)
* [`boundingRect`](#boundingrect)
* [`boundingElement`](#boundingelement)
* [`boundingRectMargin`](#boundingrectmargin)
#### handle
Type: `HtmlElement | Vue`
Required: `false`
There are two ways to use the `draggable` directive, as shown in the demo above.
1. **The simple use.** Just to put the directive on any Vue component or HTML element, and…boom! The element is draggable.
2. **Using a handler.** If you choose to use a handler, the component itself will only be draggable using the handler.
#### onPositionChange
Type: `Function`
Required: `false`
Sometimes you need to know the element’s coordinates while it’s being dragged.
Passing a callback to `draggableValue` will achieve this goal;
while dragging the element, the callback will be executed with 3 params:
- `positionDiff`
- `absolutePosition` (the current position; the first time the directive is added to the DOM or being initialized, the value will be `undefined`, unless the element has `left` and `top` values)
- `event` (the event object)
``` js
import { Draggable } from 'draggable-vue-directive'
...
export default {
directives: {
Draggable,
},
data() {
return {
draggableValue: {
onPositionChange: this.onPosChanged
}
};
},
methods: {
onPosChanged: function(positionDiff, absolutePosition, event) {
console.log("left corner", absolutePosition.left);
console.log("top corner", absolutePosition.top);
}
}
...
```
#### onDragEnd
Type: `Function`
Required: `false`
Emits only when dragging ends. Has the same functionality as [`onPositionChange`](#onpositionchange).
#### onDragStart
Type: `Function`
Required: `false`
Emits only when dragging starts. Has the same functionality as [`onPositionChange`](#onpositionchange).
#### resetInitialPos
Type: `Boolean`
Required: `false`
default: `undefined`
Returns to the initial position of the element, before it is mounted.
#### initialPosition
Type: `Position`
Required: `false`
default: `undefined`
Sets the absolute starting position of this element.
Will be applied when `resetInitialPos` is `true`.
#### stopDragging
Type: `Boolean`
Required: `false`
default: `undefined`
Immediately stop dragging.
#### boundingRect
Type: `ClientRect`
Required: `false`
default: `undefined`
Constrains dragging to within the bounds of the rectangle.
#### boundingElement
Type: `HtmlElement`
Required: `false`
default: `undefined`
Constrains dragging to within the bounds of the element.
#### boundingRectMargin
Type: `MarginOptions`
Required: `false`
default: `undefined`
When using `boundingRect` or `boundingElement`, you can pass an object with
`top`, `left`, `bottom`, and `right` properties, to define a margin between the elements and the boundaries.