Write more documentation

docs/guide/index.md

@@ -144,6 +144,69 @@ function randomKey(element) {
 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).
 
+## Functional item properties
+
+Properties of items don't have to be Numbers, Strings and Objects, they can also be functions
+returning those types. They will automatically be called with a grid object containing the `gridId`
+as well as the `context`.
+
+A singular item could look like this:
+
+```javascript
+[{
+  x: (grid) => {
+    return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
+  },
+  y: (grid) => {
+    return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+  },
+  w: 1,
+  h: this.lesson1Length,
+  key: "lesson1",
+  data: {
+    text: this.lessonData.lesson1,
+  },
+}]
+```
+
+Items can also have custom extra properties. They will however be reset after moving.
+An example where these are used is Example 5.
+
+## Listening to grid changes
+
+There are two ways to process changes made by dragging and dropping items: the `input` event
+and the `itemChanged` event.
+
+The `input` event works together with the value prop so one can use `v-model` to supply the grid
+and have changes made automatically. The event returns the grid how it would look if the item
+moved to the specific location.
+
+::: warning 
+Notice that this event is only possible if your item properties are basic types, functional items are not
+supported and the properties will be reset to `undefined`.
+:::
+
+The `itemChanged` event returns the moved item with following attributes:
+
+```javascript
+let eventData = {
+    context: String,      // Context of the origin grid (same as the target's)
+    data: Object,         // Data Object of the item
+    gridId: String,       // ID of the target grid
+    h: Number,            // Height of the item
+    key: String,          // Key of the item
+    mouseX: Number,       // Mouse position on the element relative to
+    mouseY: Number,       //    the center of the top left rectangle
+    originGridId: String, // ID of the origin grid
+    w: Number,            // Width of the item
+    x: Number,            // New x position (col) of the item
+    y: Number,            // New y position (row) of the item
+}
+```
+
+This event doesn't change the grid, this change has to be made separately. This is 
+useful if e.g. a direct API request is needed.
+
 ## Multiple grids
 
 To connect multiple grids they need to have the same context. If you supply the same string to the