From 377f131e365855d775342a99247e1d95b5ab433f Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 20:23:34 +0100
Subject: [PATCH] Start documenting multiple grids
---
docs/guide/index.md | 31 ++++++++++++++++++++-----------
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 3f9a9c7..9026de1 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -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.
+:::
--
GitLab