Skip to content
Snippets Groups Projects
Commit 377f131e authored by Julian's avatar Julian
Browse files

Start documenting multiple grids

parent 311e3142
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
......@@ -90,14 +90,14 @@ 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";
// 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;
return false;
};
```
......@@ -112,9 +112,9 @@ To customize the highlight, use the `highlight` slot inside the grid component.
```html
<drag-grid
v-model="items"
:cols="3"
:rows="2"
v-model="items"
:cols="3"
:rows="2"
>
<template #highlight>
<div ref="highlight" class="custom-highlight">
......@@ -130,16 +130,25 @@ 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
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.", "");
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).
## Multiple grids
To connect multiple grids they need to have the same context. If you supply the same string to the
`context` prop of two grids, the items can be moved interchangeably.
::: warning
Items are not deleted from the source grid if moved to a different one. You have to build a mechanism for this yourself.
:::
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment