Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-11T15:34:34.000Z (over 4 years ago)
- Last Synced: 2024-04-23T23:47:00.235Z (7 months 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
README
draggable-vue-directive
[![GitHub open issues](https://img.shields.io/github/issues/IsraelZablianov/draggable-vue-directive.svg)](https://github.com/IsraelZablianov/draggable-vue-directive/issues?q=is%3Aopen+is%3Aissue)
[![npm download](https://img.shields.io/npm/dt/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
[![npm download per month](https://img.shields.io/npm/dm/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
[![npm version](https://img.shields.io/npm/v/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
[![Package Quality](http://npm.packagequality.com/shield/draggable-vue-directive.svg)](http://packagequality.com/#?package=draggable-vue-directive)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![MIT License](https://img.shields.io/github/license/IsraelZablianov/draggable-vue-directive.svg)](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
![demo gif](https://media.giphy.com/media/3o6nUO1lWMkeyH5nfW/giphy.gif)
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.