Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

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.
+:::