diff --git a/docs/guide/index.md b/docs/guide/index.md index 3f9a9c727b1675ab27da91627c24a2e4097081a0..9026de10c757e26ed838b868aae3bcdcc45ebff5 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. +:::