Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enriquebv/vue-directive-dnd
Vue plugin to add touch support to native Drag And Drop API.
https://github.com/enriquebv/vue-directive-dnd
Last synced: 19 days ago
JSON representation
Vue plugin to add touch support to native Drag And Drop API.
- Host: GitHub
- URL: https://github.com/enriquebv/vue-directive-dnd
- Owner: enriquebv
- License: mit
- Created: 2019-07-21T23:03:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T09:47:18.000Z (about 2 years ago)
- Last Synced: 2023-02-27T10:33:02.390Z (almost 2 years ago)
- Language: JavaScript
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-directive-dnd
Simple Vue plugin to add touch support to native HTML5 Drag And Drop API.
* It will use directives (`v-drag`, `v-drop`) to already existing elements to **avoid ugly and excesive syntax/components**.
* Using touch, it will fire native Drag N' Drop events (`@dragenter`, `@dragleave`, `@dragstart`...), same reason.
* Events passed to handler when using touch will be the original [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent).
* If it's needed, you can define different event handlers when toch it's used (`@dragstart:touch`, etc).
* It will provide the ability to use a handle to drag.
## Things to do
* [x] Native Drag And Drop support.
* [x] Touch Drag and Drop simulation.
* [ ] Handles support.
## Getting started
Install package:
```bash
npm install vue-directive-dnd
```
Require the plugin:
```js
import VueDirectiveDnd from 'vue-directive-dnd';
Vue.use(VueDirectiveDnd)
```
## Usage
It will use Vue directives to specify wich elements you want to drag, and wich are available drop zones. By default, all elements who have any drag interacition, will need `v-drag` directive.
### Make an element draggable
Using `v-draggable`.
```html
```
You can provide options to the directive:
**Boolean**: Represents if the element can be draggable.
```html
export default {
data() {
return {
// You can change that variable, and draggable behaviour
// of the element will be disabled.
allowDrag: true
};
}
};
```
**Object**:
Options|Type|Default|Description
-|-|-|-
enabled|`Boolean`|true|Represents if the element can be draggable.
touchPressTime|`Number`|1000|Time in miliseconds, to allow the drag of an element, only with touch interaction.
hideDefaultGhost|`Boolean`|false|To hide the default ghost provided by navigator.
```html
export default {
data() {
return {
allowDrag: true,
hideGhost: true
};
}
};
```
### Make an element droppable
Using `v-droppable`.
```html
```
You can toggle it providing a boolean as an option:
```html
export default {
data() {
return {
// You can change that variable dynamically
// and drop behaviour will change.
allowDrop: true
};
}
};
```