Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
---
sidebar: auto
---
# Guide
## Quickstart
Install the package `vue-draggable-grid` via your favourite package manager.
Include the library in your project:
```javascript
import plugin from 'vue-draggable-grid';
Vue.use(plugin);
// Now create your app as usual
```
Inside the component where you want to use the grid define your grid and data as follows:
```vue
<template>
<drag-grid v-model="items" :cols="4" :rows="4">
<template #item="item">
{{ item.data.text }}
</template>
</drag-grid>
</template>
<script>
export default {
name: "YourComponent",
data() {
return {
items: [
{x: 1, y: 3, w: 2, h: 2, key: "item1", data: {text: "Hello world 1"},},
{x: 2, y: 2, w: 2, h: 1, key: "item2", data: {text: "Hello world 2"},},
{x: 3, y: 1, w: 1, h: 1, key: "item3", data: {text: "Hello world 3"},},
]
}
},
}
</script>
```
## Blocking fields
A field (or cell) can be blocked via the `disabledFields` prop. The prop receives an array of objects, containing the
coordinates of the blocked fields.
An example for a disabled fields property:
```javascript
disabledFields: [
{x: 1, y: 1},
{x: 2, y: 3},
]
```
## Prevent items from being dragged
To disable dragging of a specific item, simply set the attribute `disabled` of the item to `true`.
```javascript{4,5}
someDisabledItems: [
{ key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
{ key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
{ key: "key3", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
{ key: "key4", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
]
```
The highlighted items are not draggable.
## Disabling the grid
If the boolean property `disabled` is set for the whole grid, the grid itself is disabled,
and items can't be moved.
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
## Programmatic validation of movements
It is also possible to supply a function to dynamically or programmatically hinder fields from being moved to,
and items from being moved. This can be done by supplying a function which takes the `x` and `y` coordinates of
the field as well as the key of the item. If `false` is returned, the movement is prohibited. The highlight which
appears when dragging an element is also disabled for this field.
Examples for such methods are the following:
```javascript
function blockField(x, y, key) {
// We won't move items with ID 'obj8' and nothing into (3, 3) and (4, 3)
if (x === 3 && y === 3) return false;
if (x === 4 && y === 3) return false;
return key !== "obj8";
};
function blockAllMoving() {
return false;
};
```
## Changing the highlight
The highlight is the grey-bordered rectangle which appears when dragging over a field.
### Custom highlight
To customize the highlight, use the `highlight` slot inside the grid component.
```html
<drag-grid
v-model="items"
:cols="3"
:rows="2"
>
<template #highlight>
<div ref="highlight" class="custom-highlight">
This is a custom highlight with a custom style!
</div>
</template>
</drag-grid>
```
### Disabled highlight
To disable the highlight, use the `no-highlight` prop.
## Changing items on move
It is possible to make changes to an item once it moved successfully. One can supply a function in the
`validate-element` prop which gets called on a moved item and can make (in place) changes to it. Such a
function could look like this:
```javascript
function randomKey(element) {
if (element.key.length !== 1) return;
element.key += Math.random().toString(36).replace("0.", "");
};
```
This method changes the key of a moved item to a random string if the key has a length of 1.
This is used inside example 2 (the tic-tac-toe game).